循环遍历序列化的可排序表答案

【问题标题】：Looping through a serialized sortable table循环遍历序列化的可排序表
【发布时间】：2017-06-02 01:30:38
【问题描述】：

我正在通过 AJAX 向 PHP 脚本发送一些序列化数据：

HTML：

<table class="mytable">
    <tbody>
        <tr id="item_01">
            <td>content</td>
        </tr>
        <tr id="item_02">
            <td>content</td>
        </tr>
        <tr id="item_03">
            <td>content</td>
        </tr>
        <tr id="item_04">
            <td>content</td>
        </tr>
        <tr id="item_05">
            <td>content</td>
        </tr>
    </tbody>
</table>

JS：

$( '.mytable tbody' ).sortable({
    update: function() {
        items = $( this ).sortable( 'serialize' );
        $.ajax({
            url: 'ajax.php',
            type: 'post',
            data: { action: 'foo', items }
            cache: false,
            error: function() {
                console.log( 'Error' );
            }
        });
    }
});

PHP：

$action = $_POST['action'];
if ($action == 'foo') {
    $items = $_POST['items'];
    for ( $i = 0; $i < count($items); $i++ ) {
        .....
    }
}

我的印象是可以循环遍历 $_POST['items'] var 而无需任何转换，但我得到的是序列化数据：

item[]=val_1&item[]=val_2&item[]=val_3& ... &item[]=val_n

我怎样才能遍历这个？

提前致谢

【问题讨论】：

标签： jquery ajax jquery-ui serialization jquery-ui-sortable

【解决方案1】：

查看此内容，并在链接中为我们提供您需要的特定解决方案：

How do I PHP-unserialize a jQuery-serialized form?

我已在 c9.io 上预览了您的代码，并且运行良好。尝试使用这样的代码制作外部 ajax.php：

<?php
    $action = $_POST['action'];
    if ($action == 'foo') {
        $items = $_POST['items'];

        parse_str($_POST['items'], $params);
        var_dump($params);
    }
?>

然后做一些类似的东西：

$(document).ready(function(){
  var items = $('.mytable tbody').sortable();
  items = items.sortable('serialize');

  var ajaxRequest = function(){
    $.ajax({
      url: 'ajax.php',
      type: 'post',
      data: {
        action: 'foo',
        items
      },
      cache: false,
      complete: function(data){
        console.log(data)
      },
      error: function() {
        console.log('Error');
      }
    });
  };

  setInterval(function(){
    ajaxRequest();
  }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="mytable">
  <tbody>
    <tr id="item_01">
      <td>content</td>
    </tr>
    <tr id="item_02">
      <td>content</td>
    </tr>
    <tr id="item_03">
      <td>content</td>
    </tr>
    <tr id="item_04">
      <td>content</td>
    </tr>
    <tr id="item_05">
      <td>content</td>
    </tr>
  </tbody>
</table>

检查您的控制台和浏览器请求时间线，您将看到一组未命名的键 [0..n] 以及您的脚本返回的值。

查看此链接以了解如何使用此值：

jQuery UI sortable not serializing with custom attributes

【讨论】：

【解决方案2】：

所以问题在于您在 ajax 调用中发布项目的方式：“序列化”函数返回一个 字符串 而不是一个对象。因此，您需要继续将帖子数据添加到字符串中，如下所示：

...
data: 'action=foo&' + items // items is a string of the form "item[]=content&item[]=content..."
...

希望这会有所帮助！

【讨论】：

试过了，但$_POST['items'] var 仍然包含序列化数据，而不是 PHP 数组。也许我将 action var 添加到 AJAX 请求中的 data 设置的事实正在改变整个事情。
Doh - 你是对的。序列化返回一个字符串，因此您将无法直接将其用作发布的对象。我已经更新了我的答案。