防止页面在提交时重新加载

Question

我正在尝试使用维基百科 api。我得到了正确的结果，我可以在控制台中看到它。结果在右侧附加 nice div 但是当函数完成工作时它们消失了。我只在调试时看到该位置的值。这是点击提交功能：

function getWikiVal(){
  if ($("#search").val() != ""){
var searchTerm = $("#search").val();
var queryUrl = "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ searchTerm +"&format=json&callback=?";

$.ajax({
  url: queryUrl,
  dataType: 'json',
  type: 'GET',
  success: function(data, status, jqXHR) {
    console.log(data);

    for(var i = 0; i < data[1].length || i < 9; i++) {
      console.log(data[1][i]);
      console.log(data[2][i]);
      $("#results").append('<h3>' + data[1][i] + '</h3><p>' + data[2][i] + '</p>');
    }
  }
});

//console.log("the val is " + $("#search").val());
  }
}

代码也在这里： https://codepen.io/kerendesigns/pen/gLYMYw 谢谢

Answer 1

结果消失了，因为当您 "submit" 表单（点击开始）时页面被重新加载。

这样做：

$('#search-form').submit(function (event) {
    event.preventDefault();
    getWikiVal();
});

并在 HTML 标记中删除对 getWikiVal() 的调用。

防止页面在提交时重新加载

Prevent page reload on submit

api

jquery

wikipedia