javascript - JQuery/ajax页面更新帮助请

Question

嗨，我是 Jquery/ajax 新手，需要有关最后(我认为)代码段的帮助。我有一个可拖动项目(JQuery ui.draggable)，当放置在拖放区域中时，它会更新 mysql 表 - 可以使用:

    function addlist(param)
{
    $.ajax({
    type: "POST",
    url: "ajax/addtocart.php",
    data: 'img='+encodeURIComponent(param),
    dataType: 'json',
    beforeSend: function(x){$('#ajax-loader').css('visibility','visible');}



    });
}

但我无法让它做的是“重新加载”另一个页面/同一页面以显示更新的结果。简单来说我想要

1. 拖放
2. 更新数据库
3. 显示加载 gif
4. 显示数据库表中包含更新帖子的列表(即通过拖放)

Answer 1

有很多方法可以做到这一点。我可能会做的是让 PHP 脚本输出需要显示的内容。这可以通过 JSON(基本上是用 JavaScript 语法编码的数据)或通过原始 HTML 来完成。

如果您要使用原始 HTML:

function addlist(param)
{
    $.ajax(
    {
        type: 'POST',
        url: 'ajax/addtocart.php',
        data: 'img=' + encodeURIComponent(param),
        dataType: 'html',
        beforeSend: function()
        {
            $('#ajax-loader').css('visibility','visible');
        },
        success: function(data, status)
        {
            // Process the returned HTML and append it to some part of the page.
            var elements = $(data);
            $('#some-element').append(elements);
        },
        error: function()
        {
            // Handle errors here.
        },
        complete: function()
        {
            // Hide the loading GIF.
        }
    });
}

如果使用 JSON，该过程本质上是相同的，只是您必须在 JavaScript 中自己构建新的 HTML 元素(显然，PHP 脚本的输出必须使用 json_encode 进行编码) 。您的success回调可能如下所示:

function(data, status)
{
    // Get some properties from the JSON structure and build a list item.
    var item = $('<li />');
    $('<div id="div-1" />').text(data.foo).appendTo(item);
    $('<div id="div-2" />').text(data.bar).appendTo(item);

    // Append the item to some other element that already exists.
    $('#some-element').append(item);
}