0

我的页面上有 2 个元素，我试图通过 ajax 重新加载 - 但是我似乎只能更新一个。下面是我的代码，

$('#messages_send').live('click', function() {
    $.ajax({
        url: base_url + 'ajax/send_message',
        data: {
            username: $('#messages_username').val(),
            message: $('#messages_message').val(),
            saveid: $('#messages_savedid').val(),
        },
        success: function(data) {
            sending_message();

            var x = jQuery.parseJSON(data);

            if(x) {
                if(x.gp_id==80)
                {
                        $('#spn_ucredit').load(base_url + 'ajax/userdata/credits');
                        $('#overlay_credits').load(base_url + 'ajax/userdata/credits');
                }
            }
            //$('#spn_ucredit').html($('#ncd_id').val());
            //tmp_cost = $('#spn_ucredit').html()-$('#ncd_id').val();
            //$('#ncd_id').val($('#ncd_id').val()-tmp_cost);
            //alert(data);
            setTimeout(message_sent, 2000);
            setTimeout(remove_modal_box, 3000);
            setTimeout(message_revert, 3500);
            $("#saved_messages").load(base_url + 'messages #saved_messages > form');
           $("#messages_content").load(base_url + 'messages #messages_content > form');
        }
    });

    return false;
});

难道我做错了什么？

4

1 回答 1

0

西科，

您可以做很多事情来调试/改进代码，其中主要是减少 HTTP 请求的数量。使用$.get()而不是.load()，应该可以每次使用两次 HTTP 响应。

像这样的东西：

$(document).on('click', '#messages_send', function() {
    sending_message();
    $.ajax({
        url: base_url + 'ajax/send_message',
        data: {
            username: $('#messages_username').val(),
            message: $('#messages_message').val(),
            saveid: $('#messages_savedid').val(),
        },
        dataType: 'json',
        success: function(data) {
            var creditsPromise, messagesPromise;//vars that allow .when() later.
            if(data.gp_id == 80) {
                creditsPromise = $.get(base_url + 'ajax/userdata/credits', function(data) {
                    $('spn_ucredit').html(data);
                    $('#overlay_credits').html(data);
                });
            }
            else {
                creditsPromise = (new $.Deferred()).resolve().promise();
            }
            messagesPromise = $.get(base_url + 'messages', function(data) {
                var $data = $(data);
                $("#saved_messages").empty().append($data.find('#saved_messages > form'));
                $("#messages_content").empty().append($data.find('#messages_content > form'));
            });

            $.when(creditsPromise, messagesPromise).done(function() {//fires when both $.get()s have successfully responded
                message_sent();
                setTimeout(remove_modal_box, 1000);
                setTimeout(message_revert, 1500);
            });
        }
    });
    return false;
});

这将 HTTP 请求的数量从五个减少到三个。

您可以进一步将 HTTP 请求的数量减少到一个，但您需要编写一个服务器端脚本来执行当前由...ajax/send_message、...ajax/userdata/credits和执行的所有操作，并对...messages复合响应进行 json 编码。

然后，客户端代码可以简化为如下所示：

$(document).on('click', '#messages_send', function() {
    sending_message();
    $.ajax({
        url: base_url + 'ajax/send_message',
        data: $("#messages form").serialize(),//assumed
        dataType: 'json',
        success: function(data) {
            if(data.gp_id == 80) {
                $('#spn_ucredit').html(data.credits);
                $('#overlay_credits').html(data.credits);
            }
            $("#saved_messages").html(data.saved_messages);
            $("#messages_content").html(data.messages_content);
            message_sent();
            setTimeout(remove_modal_box, 1000);
            setTimeout(message_revert, 1500);
        }
    });
    return false;
});
于 2012-09-24T00:16:12.310 回答