Обратный вызов Ajax вызывается несколько раз

#javascript #jquery #ajax

Вопрос:

У меня есть ajax-вызов скрипта для поиска чисел. Ответ представляет собой массив json с именем и фамилией (строками). Клиентский скрипт — это, и я думаю, действительно не понимаю, почему скрипт выполняет цикл и отправляет ответ несколько раз. Решение toogle было последним, что я пробовал.

 $(document).ready(function () {
    $("#phone").keyup(function () {
        var number = $(this).val();
        var toogle = 0;

        if (number.length == 10 amp;amp; toogle == 0) {
            alert('inside with 10 numbers');
            toogle = 1;
            $.ajax({
                type: "POST",
                url: "info-phone.php",
                dataType: "jsonp",
                data: {
                    number: number
                }
            }).done(function (msg) {
                toogle = 0;
                if (msg.Name != "" amp;amp; msg.Surname != "") {
                    $("#phone").add("Are you "   msg.Name   " "   msg.Surname);
                };
            }); //done-function
        }
    }); //phone-keyup
}); //document-ready

В принципе, у меня есть ввод, и когда пользователь наберет 10 номеров, этот скрипт вызовет сервер и получит имя для этого номера.

Есть идеи? Просто опечатка?

1. Серверная часть отлично работает с этим echo: echo($_GET[‘обратный вызов’] . «(» . json_encode($result) . «);»);

2. Вы должны по крайней мере попытаться объявить toggle переменную вне keyup()

3. Пожалуйста, вызовите ajax в фокусе из этого текстового поля, он будет работать.

4. «при фокусировке из этого поля» вы имеете в виду размытие? Я думаю, что текущий метод лучше, поскольку он предложит фамилию, когда ввод достигнет 10 символов, а не предложит ее, когда пользователь попытается перейти к следующему полю.

5. Решение работает, я получаю ответы и записываю его, но немного странно, что его вызывали несколько раз?

Ответ №1:

попробуйте это:

 $(document).ready(function () {
    window.toogle = 0;
    $("#phone").click(function () {
        var number = $(this).val();

        if (number.length == 10 amp;amp; window.toogle == 0) {
            alert('inside with 10 numbers');
            window.toogle = 1;
            $.ajax({
                type: "POST",
                url: "info-phone.php",
                dataType: "jsonp",
                data: {
                    number: number
                }
            }).done(function (msg) {
                window.toogle = 0;
                if (msg.Name != "" amp;amp; msg.Surname != "") {
                    $("#phone").add("Are you "   msg.Name   " "   msg.Surname);
                }
            }); //done-function
        }
    }); //phone-keyup
}); //document-ready

Ответ №2:

Я думаю, ваша проблема в том, что вы используете.длина, которая измеряет длину строк, при возврате метода jQuery .val(), который возвращает строки или «числа». Поскольку ваш ввод — это номер телефона, я думаю, что метод .val() возвращает целое число, и вам нужно преобразовать его в строку для .length, чтобы работать правильно.

Попробуйте

 number.toString().length;

1. В качестве теста, я думаю, если вы введете сочетание буквенно-цифровых символов вместо номера телефона, .val() вернет строку, и ваш текущий скрипт будет работать правильно, только запустив ajax-запрос на 10-м входе.

Ответ №3:

Прежде всего, вы не должны писать анонимные функции с несколькими идентификаторами. Просто назовите свои функции, чтобы видеть яснее в этом беспорядке!

Ваши переменные number и toogle являются локальными для анонимной функции, которую вы вызываете, выполняя ввод ключа. Я думаю, что здесь может возникнуть проблема, не так ли?

Вот так:

 $(document).ready(function () {
    window.toogle = 0;
    $("#phone").click(phoneKeyUp); //phone-keyup -> this one you declare it to make document.ready() clearer
}); //document-ready


var phoneKeyUp = function() {

    var number = $(this).val();

    if (number.length == 10 amp;amp; window.toogle == 0) {
        alert('inside with 10 numbers');
        window.toogle = 1;
        $.ajax({
            type: "POST",
            url: "info-phone.php",
            dataType: "jsonp",
            data: {
                number: number
            }
        }).done(function (msg) {
            window.toogle = 0;
            if (msg.Name != "" amp;amp; msg.Surname != "") {
                $("#phone").add("Are you "   msg.Name   " "   msg.Surname);
            }
        }); //done-function -> this one may stay here
    }
};