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

内联事件处理程序是一个坏习惯。但是，如果需要，请至少添加 event 关键字。更改自：

至：

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

此外，不要在另一个事件处理程序中添加相同的事件处理程序（即Keypress）：通过这种方式，您添加的事件处理程序越来越多。而是使用事件参数。

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

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

代码段：

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>

Answer 2

函数searchfiltersajax采用一个名为search_word的参数。然后，第一个if语句检查一个事件变量。该变量在代码中没有声明，因此if语句中的代码将永远不会执行。

要验证这一点，我建议在debugger;函数中添加searchfiltersajax作为第一条语句。然后在浏览器中打开调试控制台并重新加载页面。完成操作后，请不要忘记删除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元素。这样，您就可以使用更简洁的数据交换界面，并且必须更改一段代码才能更改样式或其他表示方面。

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

2 个答案: