完成我的第一个AJAX呼叫-卡住了为什么我的结果根本不显示的原因

Question

Test it here - http://paulmatheson.net/webdev/wiki/wikipedia-viewer.html

Basically, you enter a term and the results are supposed to display below. I had it working for a second but changed something in the last hour or so and don't know where I screwed up. I've analyzed it and can't find the issue in the code. Can someone with a better eye/more experience help me out?

$(document).ready(function() {
  $('#random-btn').click(function() {
    window.open('https://en.wikipedia.org/wiki/Special:Random');
  });
  $('#submit-search-btn').click(function() {
    var searchTerm = $('#search-input').val();
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";

    $.ajax({
      type: "GET",
      url: url,
      async: false,
      dataType: "json",
      success: function(data) {
        var html;
        $('#header').html('<h5>Wiki Search</h5');
        $('.content').css('margin-top', '0');
        $('#div-random-btn').remove();

        for (var i = 0; i < data[1].length; i++) {
          html += "<div class='listing'><h4>" + data[1][i] + "</h4><h5>" + data[2][i] + "</h5></div>";
        };

        $("#output-div").html(html);
      },
      error: function(errorMessage) {}
    })
  })
});

That is the gist of the call. Please let me know if anything needs a more thorough break down.

Answer 1

It is because your button is form element & its type is submit . So basically what's wrong is the form is submitted via form. Your ajax call is being cancelled due to this & page is reloading. You can do two things

1. You need to stop this event by using preventDefault method on button click like this

   $('#submit-search-btn').click(function(e) { e.preventDefault() var searchTerm = $('#search-input').val(); //Further code

2. Change the button attribute to type="button" which will stop it from submitting in the first place