开发一个ajax按钮

Question

i'm looking for a method where if a user click on the explore button on a homepage, then the explore page should be display without the page getting reloaded. and also need loading bar on the top of the page. I know we should use AJAX but how?

The websites I've given below have that feature I'm trying to explain. example

Answer 1

If you're using jQuery, you can use

$.ajax({
url: "test.html",
}).done(function(data) {
$('#Destination').HTML(data);
});

This will put the test.html page within an HTML element with the Id of Destination. You can find a lot more at http://api.jquery.com/jquery.ajax/.

You can then use the OnClick attribute on your button and wrap the ajax call in a function

function AJAXCall(){
  $.ajax({
  url: "test.html",
  }).done(function(data) {
  $('#Destination').HTML(data);
  });
}

<button type="button" onclick="AJAXCall"> </button>