防止页面重新加载提交
问题描述:
我试图使用*api。 我得到正确的结果,我可以在控制台中看到它。 结果附加到正确的div很好,但他们disapear当功能完成工作。只有在调试时我才能看到这些值。 这是提交功能点击:防止页面重新加载提交
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 感谢。
答
结果会消失,因为当您“提交”表单(单击“执行”)时页面会重新加载。
这样做:
$('#search-form').submit(function (event) {
event.preventDefault();
getWikiVal();
});
,并删除调用getWikiVal()在你的HTML标记。
+0
解决了我的问题!谢谢。 –
+0
接受答案呢? – tmslnz
请勿使用内联JS,将事件添加为表单的提交事件,并防止表单提交。否则,当您提交表单时,它会重新加载页面。 [使用JQuery - 阻止提交表单](http://*.com/questions/9347282/using-jquery-preventing-form-from-submitting) – JJJ
谢谢。问题解决了。 –