Question

我在页面上有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;
});

我做错了吗？

Answer 1

SICO，

您可以执行许多操作来调试/改进代码，其中主要是减少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;
});

更新为通过ajax分离DIV

1 个答案: