通过 ajax 发送 jQuery 可排序数据答案

【问题标题】：sending jQuery sortable data via ajax通过 ajax 发送 jQuery 可排序数据
【发布时间】：2014-05-26 15:19:49
【问题描述】：

我也在使用 jQuery Sortable 和 twitter 引导程序。我有要排序的表格行。拖放工作正常，但我试图通过 ajax 发送新的排序顺序，它没有接收/发送排序顺序，当我尝试alert data 时，它似乎是空的。

这是我的 PHP 代码，它使用循环从 MySQL 中提取记录

<table class="table table-striped table-bordered ">
    <thead>
    <tr>
        <th> Slide Title</th>
        <th> Action</th>
    </tr>
    </thead>
    <tbody>
    <?php
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        ?>

        <tr id="<?php echo $row['id']; ?>">
            <td>
                <?php echo $row['title']; ?>

            </td>
            <td>
                <div class="btn-group pull-right">
                    <button data-toggle="dropdown" class="btn btn-small btn-info dropdown-toggle">
                        Action<span
                            class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="slide-edit.php?id=<?php echo base64_encode($row['id']) ?>">Edit</a>
                        </li>
                        <li>
                            <a href="slides.php?delete=<?php echo base64_encode($row['id']) ?>">Delete</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>

    <?php
    }

    ?>

    </tbody>
</table>

这是执行排序然后将数据发送到名为slides.php的文件的java脚本

$(document).ready(function(){

    $(function() {
        $('table').sortable({
            items: 'tr',
            opacity: 0.6,
            axis: 'y',
            stop: function (event, ui) {
                var data = $(this).sortable('serialize');
                alert(data);
                $.ajax({
                 data: data,
                 type: 'POST',
                 url: 'slides.php'
                 });
            }
        });
    });

});

我觉得我的变量 data var data = $(this).sortable('serialize'); 不起作用，如果我发送一个静态变量，那么我可以在 $_POST 中看到它

我将非常感谢您在这方面的任何帮助。

【问题讨论】：

标签： javascript php ajax jquery-ui jquery-ui-sortable

【解决方案1】：

我最终遵循this link 中提到的概念来完成我的任务，由于某种原因，当前的解决方案不适用于<table>，所以我只是使用<ul></ul> 重新编写了html 部分并且它起作用了。

希望对遇到同样问题的人有所帮助。

【讨论】：