[jQuery] Страница обновляется после добавления html с .html()

Question

Итак, я пытаюсь получить некоторые данные с сервера с помощью php, но как только он загружается на страницу, он, похоже, перезагружает страницу и заставляет ее снова исчезать , Мой 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> 

Мои ЯШ:

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

Во-первых, избегайте встроенных обработчиков кликов. Страница перезагружается, потому что по умолчанию форма отправляет содержимое формы в 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