jQuery發布將錯誤的輸入值傳遞給PHP

Question

一切正常，除了一件事。 當我在輸入框中輸入內容時，首先它會通過並正確回聲一會兒，然后最后幾個字符/數字會消失。 例如，如果我正在寫：Hello PHP會回聲Hello，然后，單詞變成H或Hell后，消失的字符數取決於鍵入單詞的速度，而我寫的速度和字符消失的速度一樣快。 當我一遍又一遍地寫得很慢時，單詞被正確地呼應並且什么都沒有改變。 這是供參考的代碼：

HTML：

<input name="paramA" id="paramA" type="text" class="form-control" maxlength="5" required/>

jQuery的：

$("#paramA").on("keyup", function () {
    var paramB = $('#paramB').val();
    var paramA = $('#paramA').val();
    var spaced = $.trim($(this).val());
    if ( !$(this).val() || $(this).val() !== spaced) {
        $("#result").html("");
    } else {
        $.post( 'http://localhost/folder/code.php',    
                {'paramB':paramB,'paramA':paramA}, 
                function(data) {
                    $("#result").html(data);
                }
        );
    }
}); 

PHP：

echo $_POST["paramA"];

任何幫助將不勝感激。

Answer 1

問題是，ajax調用不一定總是花費相同的時間。
因此，如果您快速鍵入，則幾乎同時啟動“ Hell”和“ Hello”的調用。

因此，如果由於某種原因“ Hell”調用花費了更長的時間，PHP將返回“ Hello”回顯，然后您將收到“ Hell”。 （在輸出中覆蓋“ Hello”。）

解決方案是在開始新的ajax請求之前取消待處理的ajax請求 。

或者使用keyup函數中的timeout僅在500毫秒左右未輸入任何內容時才啟動ajax調用。
（請確保您仍取消所有未決的ajax調用）

像這樣：

var timeout = null;
$("#paramA").on("keyup", function () {
    clearTimeout(timeout); // clear currently waiting timeout
    timeout = setTimeout(function(){ // wait 500 ms before ajax call
        var paramB = $('#paramB').val();
        var paramA = $('#paramA').val();
        var spaced = $.trim($(this).val());
        if ( !$(this).val() || $(this).val() !== spaced) {
            $("#result").html("");
        } else {
            $.post( 'http://localhost/folder/code.php',    
                    {'paramB':paramB,'paramA':paramA}, 
                    function(data) {
                        $("#result").html(data);
                    }
            );
        }
    }, 500);
}); 

Answer 2

這應該為您做。

var to = null;
$("#paramA").on("keyup", function () {        
    var paramB = $('#paramB').val();
    var paramA = $.trim($(this).val());
    if ( paramA.length > 0) { // adjust 0 to a minimum number of characters before post to php
        if (to !== null) {
           clearTimeout(to);
        }
        to = setTimeout(function() {
            $.post( 'http://localhost/folder/code.php',    
                {'paramB':paramB,'paramA':paramA}, 
                function(data) {
                    $("#result").html(data);
                }
            );
        }, 500); // adjust the time in ms, how long you want to wait until the post will be send
    }
});