JQuery Ajax 前置数据消失

Question

所以我正在构建一个维基百科查看器并尝试从维基百科导入数据并将其添加到无序列表 (#output)。

当我在输入字段中键入内容并点击#search 按钮时出现问题。一瞬间内容列出然后消失，就像我正在刷新页面一样。

代码如下：

$(document).ready(function() {

  $("#search").click(function() {

    var searchTerm = $("#searchTerm").val();
    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ searchTerm +"&limit=5&callback=?"

    $.ajax({      
      type: "GET",
      url: url,
      async: false,
      dataType: "json",
      success: function(data) {

        for (var i = 0; i < data[1].length; i++) {        
        $("#output").prepend("<li><a href = "+ data[3][i] +">"+ data[1][i] +"</a><p>"+ data[2][i] +"</p></li>");
        };

      },
      error: function(errorMessage){
        alert("Error");
      }


    });
  });

});

我正在 Codepen 中为 freeCodeCamp 项目执行此操作。这是我写的笔的link，这样你就可以自己看看问题是什么：

Wikipedia Viewer

这是我的第一个 post，希望我做对了。试图搜索解决方案但无法解决。提前致谢！

Answer 1

这是因为您使用的是表单，当您按下按钮时它就会被提交。

将您的 form 元素更改为 div 因为您使用的是 Ajax.

https://codepen.io/anon/pen/xpENYy?editors=1011

       <div class = "pure-form pure-form-aligned">
         <button class = "button-error pure-button" id = "search">Submit</button>
         <input class = "pure-input-2-3" id = "searchTerm">
         <ul id = "output"></ul>
       </div>

Answer 2

当您按下提交按钮时，您的表单正在提交。

可以捕获表单的onSubmit事件和returnfalse来阻止提交。您可以向您的表单添加一个 ID，以便能够 select 使用 jQuery 轻松实现它。

       $("#myForm").submit(function(e){
          return false;
        });

       <form id="myForm" class = "pure-form pure-form-aligned">
         <button class = "button-error pure-button" id = "search">Submit</button>
         <input class = "pure-input-2-3" id = "searchTerm">
         <ul id = "output"></ul>
       </form>

CodePen

JQuery Ajax 前置数据消失

JQuery Ajax prepended data disappears

codepen