[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