方法POST，状态(已取消）错误消息

Method POST, Status (canceled) error message

本文关键字：取消 错误 消息 POST 状态 方法      更新时间：2023-09-26

我有以下代码，它给了我一条Method POST, Status (canceled)错误消息：

$(document).ready(function() {
    var xhr = false;
    get_default();
    $('#txt1').keyup( function() {
        if(xhr && xhr.readyState != 4){
            alert("abort");
            xhr.abort();
        }
        if ($("#txt1").val().length >= 2) {
            get_data( $("#txt1").val() );
        } else {
            get_default();
        }
    });
    function get_data( phrase ) {
        xhr = $.ajax({
            type: 'POST',
            url: 'http://intranet/webservices.asmx/GetData',
            data: '{phrase: "' + phrase + '"}',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function( results ) {
                $("#div1").empty();
                if( results.d[0] ) {
                    $.each( results.d, function( index, result ) {
                        $("#div1").append( result.Col1 + ' ' + result.Col2 + '<br />' );
                    });
                } else {
                    alert( "no data available message goes here" );
                }
            },
            error: function(xhr, status, error) {
                 var err = eval("(" + xhr.responseText + ")");
                 alert(err.Message) ;
            }
        });
    }
    function get_default() {
        $('#div1').empty().append("default content goes here.");
    }
});

实际上，只要每个ajax请求完成，代码就可以工作，但如果我在txt1中快速键入，即在上一个请求完成之前键入下一个字符，我就会得到错误消息Method POST, Status (canceled)。

有人知道为什么会发生这种情况以及如何纠正错误吗？

我想这个问题很容易。如果调用xhr.abort();，则会为挂起的请求调用$.ajax的error回调。所以您应该在error回调中忽略这种情况。因此error处理程序可以修改为

error: function(jqXHR, textStatus, errorThrown) {
    var err;
    if (textStatus !== "abort" && errorThrown !== "abort") {
        try {
            err = $.parseJSON(jqXHR.responseText);
            alert(err.Message);
        } catch(e) {
            alert("ERROR:'n" + jqXHR.responseText);
        }
    }
    // aborted requests should be just ignored and no error message be displayed
}

附言：也许我对封闭问题的另一个老答案也会让你感兴趣。

这是因为您正在调用abort方法，该方法可能会用适当的错误消息触发错误处理程序。

您可以等待上一次ajax请求完成，然后再进行下一次调用。

为了解决问题并节省Ajax调用量，我编写了以下示例。此示例允许您处理以下两种情况：

情况1:

The user types slow enough (lets say about one key every 200+ miliseconds

情况2:

The user types fast (my average is about 20 to 50 miliseconds per key)

在下面的示例中，不需要中止或忽略Ajax调用，您不是在滥发Ajax调用，而是在使用对象来处理您的工作。（我甚至帮你弄过了）

var Handler = {
    /**
     * Time in ms from the last event
     */
    lastEvent: 0,
    /**
     * The last keystroke must be at least this amount of ms ago
     * to allow our ajax call to run
     */
    cooldownPeriod: 200,
    /**
     * This is our timer
     */
    timer: null,
    /**
     * This should run when the keyup event is triggered
     */
    up: function( event )
    {
        var d = new Date(),
            now = d.getTime();
        if( ( now - Handler.lastEvent ) < Handler.cooldownPeriod ) {
           // We do not want to run the Ajax call
            // We (re)set our timer
            Handler.setTimer();
        } else {
            // We do not care about our timer and just do the Ajax call
            Handler.resetTimer();
            Handler.ajaxCall();
        }
        Handler.lastEvent = now;
    },
    /**
     * Function for setting our timer
     */
    setTimer: function()
    {
        this.resetTimer();
        this.timer = setTimeout( function(){ Handler.ajaxCall() }, this.cooldownPeriod );
    },
    /**
     * Function for resetting our timer
     */
    resetTimer: function()
    {
        clearTimeout( this.timer );
    },
    /**
     * The ajax call
     */
    ajaxCall: function()
    {
        // do ajax call
    }
};
jQuery( function(){
    var field = jQuery( '#field' );
    field.on( 'keyup', Handler.up );
});

希望这能有所帮助。

您正在使用keyup事件，这似乎是问题所在。

如果有什么不同的话，你需要在输入一个字符后等待才能采取行动。

一个更好的解决方案可能是遵循与JQuery AutoComplete COmponent相同的策略。

Ajax是一种异步类型，它不建议u在每个keyup事件上发送请求，请尝试。。。

async: false

在post方法中。。。它将暂停后续的帖子，直到当前请求完成其回调

实际上，您需要一个setTimeout方法来防止触发冗余的ajax调用。

clearTimeout(timer);
if($("#txt1").val().length >= 2){
    timer = setTimeout(function(){
        get_data($("#txt1").val());
    }, 400);
}else{
    get_default();
}

这应该会消除你的问题。

相关文章：