使用ajax调用php时防止页面重新加载

Question

我有一个使用 ajax 调用的 php 函数，然后使用 ajax 处理响应。但是，我想阻止页面重新加载。

我有index.php 包含对function1() 的调用，它包括ajaxcall.js 和jquery

然后是我的functions.php：

function function1(){
echo '
            <form id="myform" action="" method="post" enctype="multipart/form-data">    
            <input type="text" name="callyoukai_search" id="myInput" onkeydown="searchfiltersajax(this)" placeholder="type an anime name" title="Type in a name">
            </form>
            <div id="table_recentanime" class="hscroll">   
            <table dir="ltr"   id="myTable">';
    // echo some table rows

}


if (isset($_POST['callyoukai_search'])) {
    //echo "!!!" . $_POST['callyoukai_search'] . "the post value in php!!!!!!";
     //echo 
     youkai_search($_POST['callyoukai_search']);
}

function youkai_search ($search_word){
// use $search_word to do a database query
return $result;
}

我的 ajaxcall.js

function searchfiltersajax(search_word){
    if(event.key === 'Enter') {
        console.log("yes");
        console.log(search_word.value);
document.getElementById("myform").addEventListener("Keypress", function(event){
        event.preventDefault()
      });

       jQuery.ajax({
        url: '../wp-content/plugins/youkai_plugin/youkai_plugin.php',
        type: 'post',
        data: { "callyoukai_search": "1"},
        success: function(response) { var container = document.getElementById("myTable");
        container.innerHTML = response;
        console.log('php gave javascript '); console.log(response); console.log('php gave javascript '); }
    });

    console.log ("done");
    }


}

我的 ajax 调用工作正常。它使用所需的search_word调用php函数，搜索结果就像我想要的那样替换div内容。但是，在此之后，页面会重新加载。

如何防止重新加载？我试过preventDefault()，但是我用的方式不行。

提前致谢

Answer 1

函数searchfiltersajax 接受一个名为search_word 的参数。然后第一个 if 语句检查事件变量。这个变量在你的代码中没有声明，所以 if 语句中的代码永远不会被执行。

为了验证这一点，我建议在searchfiltersajax 函数中添加debugger; 作为第一条语句。然后在浏览器中打开调试控制台并重新加载页面。完成后不要忘记删除debugger; 语句。如果您知道如何在 javascript 调试器中设置断点，则根本不应该使用 debugger; 语句。

据我了解，您尝试阻止将表单提交到服务器，而是发送 ajax 调用。 StackOverflow 上有几个关于这个主题的答案，例如Prevent users from submitting a form by hitting Enter 。您可以使用这样的代码来实现您的目标（取自链接）：

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

最后但同样重要的是，我建议不要将任何服务器（甚至您自己的）发送到您的页面的原始 HTML 包含在内：

container.innerHTML = response;

尝试发送一个包含您希望呈现的信息的 JSON 对象，并通过 JavaScript 将该对象转换为 HTML 元素。这样，您就有了一个更简洁的数据交换界面，并且必须更改一段代码以更改样式或其他表示方面。

Answer 2

内联事件处理程序是一种不好的做法。但如果您需要它，至少添加 event 关键字。更改自：

到：

<input type="text" name="callyoukai_search" id="myInput" onkeydown="searchfiltersajax(this, event)"

此外，不要在另一个内部添加相同的事件处理程序（即：Keypress）：这样您会添加越来越多的相同事件处理程序。而是使用 event 参数。

我建议使用addEventListener() 或.on()：

$('#myInput').on('keydown', function(e) {
      searchfiltersajax(this, e);
});

sn-p：

function searchfiltersajax(search_word, e) {
    if (event.key === 'Enter') {
        e.preventDefault();
        console.log("yes");
        console.log(search_word.value);


        jQuery.ajax({
            url: '../wp-content/plugins/youkai_plugin/youkai_plugin.php',
            type: 'post',
            data: {"callyoukai_search": "1"},
            success: function (response) {
                var container = document.getElementById("myTable");
                container.innerHTML = response;
                console.log('php gave javascript ');
                console.log(response);
                console.log('php gave javascript ');
            }
        });

        console.log("done");
    }
}

<form id="myform" action="google.com" method="post" enctype="multipart/form-data">
    <input type="text" name="callyoukai_search" id="myInput" onkeydown="searchfiltersajax(this, event)"
           placeholder="type an anime name" title="Type in a name">
</form>
<div id="table_recentanime" class="hscroll">
    <table dir="ltr" id="myTable">
        <tbody>
        </tbody>
    </table>
</div>