如何通过Ajax传递数据？jQuery UI Sortable场景下的Ajax传参问题

嘿，我之前也碰到过一模一样的问题！Sortable的stop事件能正常触发Ajax请求，但数据就是传不到后端对吧？别慌，咱们一步步来搞定它：

首先，核心关键是要在stop事件里正确抓取排序后的元素数据，然后在Ajax请求里把这些数据准确传递出去。下面给你一套完整的可参考示例：

1. 先准备可排序的HTML结构 #

给每个可排序项加个自定义属性（比如data-item-id）来标识元素，方便后续获取排序顺序：

<ul id="sortable-list">
  <li data-item-id="1">项目1</li>
  <li data-item-id="2">项目2</li>
  <li data-item-id="3">项目3</li>
</ul>

2. 编写Sortable与Ajax的JS逻辑 #

在stop事件里，用Sortable自带的toArray方法就能轻松拿到排序后的元素ID数组，然后通过Ajax的data参数把数据传给后端：

$(function() {
  $("#sortable-list").sortable({
    stop: function(event, ui) {
      // 获取排序后的元素ID数组，指定抓取data-item-id属性的值
      var sortedIds = $(this).sortable("toArray", {attribute: "data-item-id"});
      
      // 发送Ajax请求到ajax.php
      $.ajax({
        url: "ajax.php", // 务必确保文件路径正确
        type: "POST",    // 用POST传递数据更安全
        data: {
          sorted_items: sortedIds // 这里就是要传给后端的数据，键名可自定义
        },
        success: function(response) {
          console.log("数据传递成功！服务器返回：", response);
          // 这里可以加成功后的页面提示或状态更新逻辑
        },
        error: function(xhr, status, error) {
          console.error("请求出错啦：", error);
          // 出错时给用户友好提示
        }
      });
    }
  }).disableSelection(); // 防止选中文本干扰排序操作
});

3. 后端ajax.php接收数据的代码 #

后端通过$_POST就能拿到前端传过来的排序数组，接下来你就可以根据业务需求处理（比如更新数据库的排序顺序）：

<?php
// 检查是否接收到排序数据
if(isset($_POST['sorted_items'])) {
  $sortedItems = $_POST['sorted_items'];
  // 这里写你的业务逻辑，比如将排序顺序同步到数据库
  // 示例：打印接收的数据，方便调试
  print_r($sortedItems);
  
  // 返回响应给前端
  echo "排序数据已接收，顺序为：" . implode(", ", $sortedItems);
} else {
  echo "未接收到排序数据，请检查请求参数";
}
?>

几个需要注意的小细节： #

• 如果你的可排序项本身有id属性，直接用$(this).sortable("toArray")就行，不用额外指定attribute参数；
• 打开浏览器控制台（F12），可以查看Ajax请求的详细信息，确认数据是否正确发送、后端是否返回正常响应；
• 一定要保证ajax.php的文件路径和JS里写的一致，不然会出现404错误哦。

按照这个方法修改后，再测试一下，应该就能成功把排序数据传给ajax.php啦！

内容的提问来源于stack exchange，提问作者Алиса Фамина