javascript - [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>

我的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