就在那时，我即将结束对 JavaScript 系统的重写，我们正在从 Prototype 转移到 jQuery。我们有大量 AJAX 请求在发生特定元素事件时触发，下面示例中的一个是日历上的新事件，但它也发生在其他地方。

我遇到的问题是当一个事件被触发时，有时会发出两个 AJAX 请求。第一个返回正确的值，但(如您所见)它仍然表示正在处理，它从不返回我的 JavaScript 所需的成功消息。第二个请求返回正确的结果并正确终止。

我遇到的问题是我们的 jQuery 屏幕拦截器设置为在繁重的 AJAX 请求期间防止用户输入，显然是因为 AJAX 请求仍然存在，屏幕永远不会解锁。如果我要刷新此屏幕，一切都会按预期工作。

任何人都可以解释为什么会发生这种行为。

alt text http://archive.ilmv.co.uk/images/jquery-duplicate-ajax-request.png

编辑

"requests that fire when a certain element events occur" - this is the key phrase, I think. Please provide some info on how you set your events. Maybe it fires twice because you have multiple handlers set? – Igor Zinov'yev

$("#my_select","#context").change(function(){
            // uz_ajax is a wrapper function, keeps most of the same functionality as $.ajax()
    uz_ajax({
        target:"#my_target",
        data:{
            module:'my_module',
            controller:'my_controller',
            action:'my_action',
            id:$(this).val(),
            ajax:''
        }
    });
});

If you are reloading the elements that are bound then the change events could be triggered recursively... We really need to see more code (what do you do on success of the ajax call etc) – redsquare

var ajax_count = 0;
var ajax_response = null;

function uz_ajax(options) {

    // set default options
    var defaults = {
        async: true,
        type: "GET",
        data: {},
        url: "/",
        cache: false,
        force_change: true,
        highlight: true,
        action: "normal",
        dataType: "html",
        selected: {
            value: null,
            disabled: false
        }
    };

    // merge the passed options with the defaults
    var options = $.extend(defaults, options);

    // start the jQuery ajax method
    $.ajax({
        async: options.async,
        type: options.type,
        url: options.url,
        data: options.data,
        beforeSend: function() {
            // we only want to block the screen on the first pass
            if(++ajax_count==1) {
                $.blockUI({message:'Loading data, please wait'});
            } 
        },
        success: function(responseText) {           
            if(options.target!==undefined) {
                // if target isn't an array, make it one
                if(!$.isArray(options.target)) {
                    options.target = new Array(options.target);
                }

                var targets = options.target;

                for ( var i in targets ) {
                    console_info("uz_ajax() --> Applying contents to "+targets[i]);

                    switch(options.action) {
                        case "normal":
                            if($(targets[i]).is("input")) {
                                $(targets[i]).val(trim(responseText));
                            } else {
                                $(targets[i]).html(trim(responseText));
                            }
                            break;
                        case "selected":
                            // preserve the current target value (e.g. list of options), but 
                            // set the selected value to the ajax response
                            console_warn("Changing selected value of "+targets[i]+" to '"+responseText+"'");
                            // trim the response so we don't get any smarty induced errors such as '    7'
                            $(targets[i]).val(trim(responseText));
                            break;
                    }

                    // set selected value
                    if(options.selected.value!=null) {
                        $(targets[i]).val(options.selected.value);
                    }

                    // highlight the target
                    // we don't want to highlight the target if it's a hidden input, as this will force a .show(
                    if($(targets[i]).attr('type')!='hidden' && options.highlight===true) {
                        $(targets[i]).effect("highlight",{},2000);
                    }

                    // force the target to change
                    if(options.force_change===true) {
                        $(targets[i]).trigger("change");    
                    }

                    /* rebind certain elements that do not use conventional events */
                    /* We probably need to get all of these rebinds in a single function */
                    createDatePickers(targets[i]);
                }
            } else {
                ajax_response = responseText;
                console_warn("uz_ajax -> no targets specified");
                // Well... we have no element to target, we need to return the value instead
                // of course if we return here we're going
                // we probably also need to check the ajax count as this will be the last executed part before we return
            }
        },
        complete: function () {
            /* if all ajax requests have completed, unblock screen */
            if(--ajax_count===0) {
                $.unblockUI();
                /* could use this callBack to return a value *dun dun duuuuun* */
                if (options.ajaxComplete) {
                    options.ajaxComplete(ajax_response);
                }
            }
        },
        cache: options.cache,
        dataType: options.dataType
    });

}

another way to stop multiple ajax requests is to heck jQuery.active prior to the call. jQuery keeps an internal count of 'live' ajax requests using this property. – redsquare

最佳答案

您是否尝试过使用 .click() 代替？我在 javascript 中使用 .change() 时遇到了不规则事件的问题。试试看。

关于javascript - jQuery AJAX 问题，间歇性地获取重复请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3156111/