如何通過ajax將項目ID發送到服務器：jquery sortable

Question

我有一組需要重新排列的圖像。所以我把圖像放在它的div裏面。我可以替換它，但它不是通過ajax發送id。

HTML

<div class="row sortable"> 
    <div class="col-sm-4" id="1"> 
    <img src="//via.placeholder.com/200x150" /> 
    </div> 

    <div class="col-sm-4" id="2"> 
    <img src="//via.placeholder.com/200x150" /> 
    </div> 

    <div class="col-sm-4" id="3"> 
    <img src="//via.placeholder.com/200x150" /> 
    </div> 
</div> 

JS

$('.sortable').sortable({ 
    update: function(event, ui) { 
    $.ajax({ 
     data: $(this).sortable('serialize'), 
     type: 'POST', 
     url: '/echo/json/', 
     success: function(data) { 
     console.log(data); 
     } 
    }); 
    } 
}); 

這裏是我的小提琴：http://jsfiddle.net/bmp6xoog/3/

Answer 1

的文件明確指出，

默認情況下，通過查看 "setname_number"格式的每個項目的ID，並且它會像 "setname[]=number&setname[]=number"那樣散列出一個散列。

注意：如果序列化返回一個空字符串，確保ID 屬性包含下劃線。它們必須採用以下形式： "set_number"。
例如，具有id屬性的3元素列表"foo_1", "foo_5","foo_2"將序列化爲"foo[]=1&foo[]=5&foo[]=2"。
您可以用 使用下劃線，等號或連字號來分隔集合和 數字。
例如"foo=1","foo-1"和"foo_1"全部序列化爲 "foo[]=1"。

您使用的ID與只是數字，這就是爲什麼它不工作，它必須是一個ID的格式爲foo_1等

$('.sortable').sortable({ 
 
    update: function(event, ui) { 
 
    console.log($(this).sortable('serialize')); // works 
 
    
 
    $.ajax({ 
 
     data: $(this).sortable('serialize'), 
 
     type: 'POST', 
 
     url: '/echo/json/', 
 
     success: function(data) { 
 
     console.log(data); 
 
     } 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="row sortable"> 
 
    <div class="col-sm-4" id="item_1"> <!-- like this --> 
 
    <img src="//via.placeholder.com/200x150" /> 
 
    </div> 
 

 
    <div class="col-sm-4" id="item_2"> <!-- and this --> 
 
    <img src="//via.placeholder.com/200x150" /> 
 
    </div> 
 

 
    <div class="col-sm-4" id="item_3"> <!-- and this --> 
 
    <img src="//via.placeholder.com/200x150" /> 
 
    </div> 
 
</div>

Answer 2

爲了序列化列表，你必須在元素的id上加下劃線，像這樣：id =「id_3」