如何通过AJAX提交并更新jQuery Serialize序列化数据

一、数据无法提交到test2.php的原因 #

• 重复初始化sortable组件：你在代码前半段已经执行了$( "#sortable" ).sortable()初始化，后续document.ready中再次对ul元素绑定sortable配置会出现冲突，导致stop回调不生效，ajax请求根本不会触发。
• 前后端参数接收不匹配：前端用sortable('serialize')生成的参数格式为item[]=1&item[]=2，直接作为post数据发送时，后端不存在名为data的post参数，你写的$date = $_POST["data"]无法获取到任何值。
• 后端SQL语句变量未定义：test2.php中的UPDATE语句用到的$something、$id均未定义，就算请求能正常到达，也无法执行数据库操作。

二、更新数据库排序规则的实现方案 #

首先你需要在对应数据库表中新增一个int类型的排序字段，例如命名为sort_order，用于存储每行数据的排序权重。

修改后的代码示例 #

Test.php

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
  <li id="item-1">Item 1</li>
  <li id="item-2">Item 2</li>
</ul>
Span 1: <span id="span"></span>
Span2: <span id="span2"></span>
<script>
$(document).ready(function () {
  // 统一初始化sortable，删除原重复的初始化代码
  $('#sortable').sortable({
    axis: 'y',
    stop: function (event, ui) {
      var sortData = $(this).sortable('serialize');
      $('#span2').text(sortData);
      $.ajax({
        data: {sort_data: sortData},
        type: 'POST',
        url: 'test2.php',
        success: function(res){
          $("#span").text(res);
        },
        error: function(xhr, err) {
          console.log('请求出错：', err);
        }
      });
    }
  }).disableSelection();
});
</script>

Test2.php

<?php 
include('../db.php'); 
// 校验参数
if (!isset($_POST['sort_data'])) {
  die('缺少排序参数');
}
// 解析提交的序列化参数
parse_str($_POST['sort_data'], $output);
$sortIds = $output['item'] ?? [];
if (empty($sortIds)) {
  die('排序数据为空');
}
// 连接数据库
$conn = new mysqli($servername, $dbusername, $dbpassword, $dbname);
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}
// 使用预处理语句避免SQL注入，遍历更新排序值
$stmt = $conn->prepare("UPDATE 替换为你的表名 SET sort_order = ? WHERE id = ?");
$stmt->bind_param("ii", $orderVal, $itemId);
foreach ($sortIds as $index => $itemId) {
  // 数组索引就是排序权重，可根据需求从0或1开始计数
  $orderVal = $index;
  $stmt->execute();
}
echo "排序更新成功，当前顺序ID：" . implode(',', $sortIds);
$stmt->close();
$conn->close();
?>

内容的提问来源于stack exchange，提问作者Ambiguous Turtle