Javascript 通过ajax更新到单独的div

我的页面上有两个元素，我正试图通过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;
});

我做错什么了吗？

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;
});

---

尝试改用load->$.get（url、数据、函数（结果）{$（“#元素”）.html（结果）}）一些技巧：用“on”替换“live”，用“e.preventDefault”替换“return false”（在函数中声明e之后）。你的控制台有什么错误吗？@Johan：我们不知道OP的版本是什么<上的代码>只能从版本1.7.2起使用。如果OP使用低于1.7但高于1.4.2的版本，则应使用

委托

而不是

活动

进行动态绑定，并使用

绑定

将事件附加到静态元素。sico，为什么设置超时-只是为了视觉效果，还是预期加载请求的完成？设置超时只是为了视觉效果