javascript - 完成我的第一个 AJAX 调用 - 困惑为什么我的结果根本不显示

Question

在这里测试 - http://paulmatheson.net/webdev/wiki/wikipedia-viewer.html

基本上，您输入一个术语，结果应该显示在下面。我让它工作了一秒钟，但在最后一个小时左右改变了一些东西，不知道我在哪里搞砸了。我分析了一下，没发现代码中的问题。有更好眼光/更有经验的人可以帮助我吗？

$(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) {}
    })
  })
});

这就是这次通话的要点。如果有什么需要更彻底的分解，请告诉我。

Answer 1

这是因为您的按钮是表单元素并且其类型是submit。所以基本上问题是表单是通过表单提交的。由于此原因，您的 ajax 调用将被取消，并且页面正在重新加载。你可以做两件事

1. 您需要使用 preventDefault 停止此事件按钮点击方法如下

   $('#submit-search-btn').click(function(e) { e.preventDefault() var searchTerm = $('#search-input').val(); //更多代码

2. 将按钮属性更改为 type="button" 这将首先阻止其提交