javascript - jQuery刷新特定div

Question

所以我有一个可排序的 li 列表，其中显示了一系列页面。

当我对它们进行排序时，我的 jQuery 代码会调用一个 php 页面来更新数据库中页面的顺序。

在与列表相同的页面上，它按页面的顺序显示页面，但我希望能够在更新数据库后立即自动更新此顺序，而无需实际刷新页面。

所以基本上， secret 地“刷新”pageContainer div。

最好的方法是什么？

<div id="pageContainer">
   <!-- include() a series of pages in the right order from database -->
</div>

 $("#pageContainer").sortable({
    stop : function(event, ui){
        var postData = $(this).sortable('serialize');
        var url = "saveOrder.php";
        $.ajax({
            type: "POST",
            url: url,
            data: postData,
            success: function(data) { $('#pageContainer').html(data);  }
        });
    }
});

编辑所以一个简单的 $('#pageContainer').html(data); 就成功了，但是我的 $('form').on('input propertychange change')停止工作。修复位于 this page如果有人想看的话。

Answer 1

如果您在 saveOrder.php 页面中回显出所需的 HTML，那么剩下的就很简单了:

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html',
    success: function(data) { 
        $('#pageContainer').html(data);
    }
});

根据您的 jQuery 版本 (v1.5+)，您可能希望利用 jQuery Promise $.ajax 返回。您的代码将更改为:

$.ajax({
    type: "POST",
    url: url,
    data: postData,
    contentType: 'html'
}).done(function(data) {
    $('#pageContainer').html(data);
});

这允许您链接回调并使您的设置与回调函数分开。例如，您可以这样做:

...
}).done(function(data) {
    $('#pageContainer').html(data);
}).fail(function() {
    alert('failed :(');
}).always(function() {
    alert('done!');
});