考虑到列表项的顺序，在单击按钮时调用 PHP 函数答案

【问题标题】：Call PHP function on button click considering the sequence of list item考虑到列表项的顺序，在单击按钮时调用 PHP 函数
【发布时间】：2016-11-21 18:26:44
【问题描述】：

大家好，我在一个小项目上需要你的帮助。我避免使用 AJAX，因为我没有时间正确学习它，但我认为我需要一个 AJAX 函数。我的问题是我想调用一个写入数据库的 PHP 函数。我想在单击按钮时将列表项的文本及其位置写入我的数据库。我正在使用 JqueryUI 使我的列表项可拖动。代码如下所示：

<ul id="sortable">
         <li class="ui-state-default">item1</li>
         <li class="ui-state-default">item2</li>
         <li class="ui-state-default">item4</li>
         <li class="ui-state-default">item3</li>
         <li class="ui-state-default">item5</li>
</ul>

结果应该是这样的：

Position Text
1        item1
2        item2
3        item4
4        item3
5        item5

也许我可以通过自动递增来解决这个问题，以跳过我的位置的写入？

【问题讨论】：

你肯定需要 ajax，不要转义。
告诉我们你尝试了什么？和js 和php?!

标签： php jquery html sql ajax

【解决方案1】：

您需要 AJAX 来执行此操作。幸运的是，sortable 有一个欺骗性的 API，可以让你很容易地获取更新的位置并将它们发布到服务器。

通过Sortable提供的API，你应该在sortable对象上定义一个更新方法，见http://api.jqueryui.com/sortable/#event-update
为方便您自己，请在前端渲染列表中的元素时提供数据 ID 和数据顺序。

这里是一个简短的例子，假设模型是列表元素的数组，模型数组中的每个对象都有一个对应的数据库行 id 和当前订单位置。

<ul id="sortable">
<?php foreach ($models as $item: ?>
    <li data-id="<?php echo $item->id; ?>"><?php echo $item->name; ?></li>
<?php endforeach; ?>
</ul>

然后在创建可排序对象时，您将定义一个应该使用的更新方法。

$("#sortable").sortable({
  update: function (event, ui) {
    var newOrder = $("#sortable").sortable("toArray", {"attribute: "data-id"});
    $.post('route/for/updating/order', {
       'order': newOrder
    });
  }
});

当进行更改时，将向路由route/for/updating/order 发送一个POST 请求，其中包含post 参数、'order' 和newOrder 对象。默认情况下，toArray 方法将使用 'id' 属性，但我们告诉它使用数据库行值以便于服务器端处理。

你可以在这里http://api.jqueryui.com/sortable/#method-toArray查看更多关于 toArray API 功能的信息

【讨论】：