[jQuery]使用.html（）附加html后页面刷新页面刷新后使用.html（）

Question

所以我试图从服务器获取一些数据，但只要它加载到页面上，它似乎重新加载页面并使其消失。 我的HTML：

<form id="searchForm"> 
<input name="searchValue" type="text" id="search"> 
<input type="submit" name="Submit" value="Zoek op klant"   onclick="getKlanten()"> 
</form> 

<div id="klanten"> 
</div> 

我的JS：

function getKlanten(){ 
var value = $("#search").val(); 
$.ajax({ 
    url:'includes/getKlanten.php', 
    async: false, 
    type: 'POST', 
    data: {'searchValue':value}, 
    success: function(data, textStatus, jqXHR) 
    { 
     $('#klanten').html(data); 
    }, 
    error: function() { 
     $('#klanten').html('Bummer: there was an error!'); 
    } 
}); 
} 

谁能帮助？它被放入div中，但之后立即消失。

Answer 1

首先，避免内联点击处理程序。页面重新加载，因为默认情况下，表单将表单内容提交到action属性中指定的url。

将一个事件附加到表单并使用preventDefault来避免页面刷新。做这样的事情

$('#searchForm').on('submit', function(e){ 
    e.preventDefault(); 

    // your ajax request. 
}); 

或事件附加到输入按钮这样

$('input[type="submit"]').on('click', function(e){ 
    e.preventDefault(); 

    // your ajax request 
}); 

了解更多关于的preventDefault here