使用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

內聯事件處理程序是一個壞習慣。 但是，如果需要，請至少添加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的幾個答案，例如，通過單擊Enter阻止用戶提交表單 。 您可以使用如下代碼來實現您的目標（從鏈接中獲取）：

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

最后但並非最不重要的一點，我建議不要包括任何服務器（甚至是您自己的服務器）發送到您的頁面的原始HTML：

container.innerHTML = response;

而是嘗試發送包含您希望呈現的信息的JSON對象，然后通過JavaScript將其轉換為HTML元素。 這樣，您將擁有一個更干凈的數據交換界面，並且必須更改一段代碼才能更改樣式或其他表示方式。