將JavaScript變量傳遞到Ajax數據中：

Question

我正在對jQuery進行排序。 我從數據庫中提取信息以填充每個可訂購元素，然后將新訂單重新發布回我的數據庫。 但是，我無法弄清楚如何采用我在序列化jQuery中定義的變量並將其輸入到data：區域的AJAX函數中。

這是我的代碼：

$(document).ready(function() 
{              
    $('#social_list').sortable(
    { 
        update: function() 
        {
            var order = $('#social_list').sortable('serialize');
            alert(order);
        }                         
    });
});

$.ajax(
{
    url: 'save_items_order.php',
    data: ?,
    type: '$_POST', 
    success: function(msg)
    {
        alert(msg);
    }
});

所以我想采用var order創建的字符串並將其傳遞到ajax中，這樣data：= var order string

我嘗試了數據：$（'＃social_list'）。sortable（'serialize'），似乎一切正常，但似乎沒有更新我的表

Answer 1

最簡單的解決方案是

$(document).ready(function() {
    $('#social_list').sortable({
        update: function() {
            // global. you could just omit var, but I find this clearer
            window.order = $('#social_list').sortable('serialize');
        }
    });
});

$.ajax({
    url: 'save_items_order.php',
    data: window.order, /* ...rest of code */
});

但我敢肯定，您知道全局變量很糟糕，您至少可以將它們包含在名稱空間中，

var myNs = {};
$(document).ready(function() {
    $('#social_list').sortable({
        update: function() {
            myNs.order = $('#social_list').sortable('serialize');
        }
    });
});

$.ajax({
    url: 'save_items_order.php',
    data: myNs.order /* ... rest of code */
});

或重新組織您的代碼，以便他們可以共享變量。

$(document).ready(function() {
    var order;
    $('#social_list').sortable({
        update: function() {
            order = $('#social_list').sortable('serialize');
        }
    });
    $('#myButton').click(function(){
        $.ajax({
            url: 'save_items_order.php',
            data: order, /* ... rest of code */
        });
    });
});

請注意，在這種情況下，您可以執行以下操作

$.ajax({
    url: 'save_items_order.php',
    data: $('#social_list').sortable('serialize') /* ... rest of code */
});

Answer 2

您只需將任何javascript對象作為數據傳入即可。

對於您的特定情況，我可能會將AJAX調用包裝在一個函數中，例如：

function saveItemOrder(order)
{
    $.ajax({
        url: 'save_items_order.php',
        data: { "order": order },
        type: 'POST', // <-- this should be just "POST"
        success: function(msg){
            alert(msg);
        }
    });
}

接着：

update: function() {
    var order = $('#social_list').sortable('serialize');
    // alert(order);

    saveItemOrder(order);
}