用.html()添加html后页面刷新 - [jQuery]Page refreshes after appending html with .html()

[jQuery]Page refreshes after appending html with .html()

本文关键字：html 刷新添加 | 更新日期: 2023-09-27

所以我试图从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中，但很快又消失了

首先，避免内联单击处理程序。页面会重新加载，因为默认情况下，表单会将表单内容提交给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的信息