предотвратить перезагрузку страницы при вызове php с помощью ajax

Question

У меня есть функция php, которую я вызываю с помощью ajax, а затем обрабатываю ответ с помощью 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;
}

my 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 работает нормально.Он вызывает функцию php с нужным словом search_word, и результаты поиска заменяют содержимое div так, как я хочу.Однако сразу после этого страница перезагружается.

Как предотвратить перезагрузку?Я попробовал preventDefault(), но способ, которым я его использовал, не сработал.

Заранее спасибо

Answer 1

Функция 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, содержащий информацию, которую вы хотите представить, и преобразовать этот объект в элементы HTML с помощью JavaScript.Таким образом, у вас будет более чистый интерфейс для обмена данными, и вам придется изменить часть кода, чтобы изменить стиль или другие аспекты представления.

Answer 2

Встраивание обработчиков событий - плохая практика.Но если вам это нужно, хотя бы добавьте ключевое слово event .Измените:

на:

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

Более того, не добавляйте один и тот же обработчик событий (например, нажатие клавиш) внутри другого: таким образом вы добавляете все больше и большераз тот же обработчик событий.Вместо этого используйте параметр события.

Я бы предложил использовать 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>