如何通过jQuery获取列表项各部分数据并传递至其他页面存储？

一、修改jQuery代码，收集完整列表项数据 #

在sortable的update事件中，遍历排序后的每个列表项，提取序号、单选框信息和标题，构建结构化数据后提交到PHP：

var lyw = document.getElementById("hidLYWNo").value;

$("#preliminary-list").sortable({
  update: function (event, ui) {
    // 存储所有列表项数据的数组
    var itemData = [];
    
    // 遍历排序后的每个li元素
    $(this).find("li").each(function() {
      var $li = $(this);
      
      // 提取序号（第一个span的文本）
      var sequence = $li.find("span:first").text().trim();
      
      // 提取两个单选框的value和选中状态
      var $radios = $li.find(".radCategory");
      var radio1 = {
        value: $radios.eq(0).val(),
        isChecked: $radios.eq(0).is(":checked")
      };
      var radio2 = {
        value: $radios.eq(1).val(),
        isChecked: $radios.eq(1).is(":checked")
      };
      
      // 提取标题（最后一个span的文本）
      var title = $li.find("span:last").text().trim();
      
      // 提取列表项的唯一标识（后续存储用）
      var itemId = $li.attr("id");
      
      // 将当前项数据加入数组
      itemData.push({
        id: itemId,
        sequence: sequence,
        radio1: radio1,
        radio2: radio2,
        title: title,
        lyw: lyw
      });
    });
    
    // 发送POST请求到PHP页面
    $.post("tutupdateplanorder.php", { items: itemData }, function(response) {
      // 可选：处理返回结果，比如提示保存状态
      console.log("数据保存结果：", response);
    });
  },
});

二、修正PHP生成列表项的潜在问题 #

1. 确保列表项id唯一：当前代码生成的id="'.$categ.'data-id"会导致同类别下的列表项id重复，违反HTML规范，建议结合唯一标识（比如$plit）修改：

$line  = '<li id="'.$categ.'-'.$plit.'-data-id"><span style="display: inline-block; width: 3em; text-align: center">'.$n.'</span>';

2. 修正单选框分组逻辑：当前所有单选框name="myRadios"会导致整个列表只能选中一个单选框，若每个列表项的两个单选框为独立分组，需动态设置name：

// 替换原单选框name为动态值，结合$plit保证分组独立
$line .= $p1 . ' <input type="radio" class="radCategory" name="myRadios_'.$plit.'" onchange="handleChange('.$i.');" value="'.$p1.'~'.$plit.'" /> &nbsp;&nbsp;';
$i++;
$line .= $p2 . ' <input type="radio" class="radCategory" name="myRadios_'.$plit.'" onchange="handleChange('.$i.');" value="'.$p2.'~'.$plit.'" /> &nbsp;&nbsp;';

三、PHP接收并存储数据（tutupdateplanorder.php） #

接收POST传递的items数组，遍历处理并存储（示例用MySQL，需根据实际数据库调整）：

<?php
// 连接数据库（替换为你的数据库信息）
$conn = mysqli_connect("localhost", "username", "password", "database_name");

// 接收POST数据
$items = $_POST['items'];

// 遍历处理每个列表项
foreach($items as $item) {
    // 转义特殊字符，防止SQL注入
    $itemId = mysqli_real_escape_string($conn, $item['id']);
    $sequence = mysqli_real_escape_string($conn, $item['sequence']);
    $radio1Value = mysqli_real_escape_string($conn, $item['radio1']['value']);
    $radio1Checked = $item['radio1']['isChecked'] ? 1 : 0;
    $radio2Value = mysqli_real_escape_string($conn, $item['radio2']['value']);
    $radio2Checked = $item['radio2']['isChecked'] ? 1 : 0;
    $title = mysqli_real_escape_string($conn, $item['title']);
    $lyw = mysqli_real_escape_string($conn, $item['lyw']);
    
    // 执行更新操作（根据你的表结构调整SQL语句）
    $sql = "UPDATE your_table 
            SET sequence = '$sequence', 
                radio1_value = '$radio1Value', 
                radio1_checked = '$radio1Checked', 
                radio2_value = '$radio2Value', 
                radio2_checked = '$radio2Checked', 
                title = '$title',
                lyw = '$lyw'
            WHERE item_id = '$itemId'";
    
    mysqli_query($conn, $sql);
}

// 返回响应
echo "数据保存成功";
mysqli_close($conn);
?>

关键说明 #

• 若不需要存储未选中的单选框状态，可只收集选中的单选框值，减少数据传输量。
• 建议使用PHP预处理语句替代mysqli_real_escape_string，进一步提升安全性。

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