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

文件明确指出

默认情况下，通过查看格式中每个项目的ID来工作   "setname_number"，它吐出像哈希一样的哈希   "setname[]=number&setname[]=number"。

注意：如果serialize返回一个空字符串，确保id   属性包括下划线。它们必须采用以下形式：   "set_number" 即可。
  例如，一个id属性为"foo_1"的3元素列表，   "foo_5"，"foo_2"将序列化为"foo[]=1&foo[]=5&foo[]=2"   您可以   使用下划线，等号或连字符分隔集合和   号。
  例如"foo=1"，"foo-1"和"foo_1"都序列化为   "foo[]=1"。

您使用的ID仅包含数字，这就是为什么它不起作用，它必须是foo_1等格式的ID。

$('.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”

如何通过ajax：jquery sortable将项目ID发送到服务器

2 个答案: