如何通过jQuery和AJAX同时发送表格数据与复选框数据？

问题说明 #

现有一套通过jQuery和AJAX将HTML5表格可编辑单元格数据插入数据库的代码，需要在发送表格数据时一并提交复选框的选中状态数据。

修改方案 #

方法1：手动拼接参数（适配原有代码逻辑） #

在原有拼接表格单元格参数的基础上，添加复选框数据的拼接逻辑，保持和原有代码风格一致：

修改后的完整代码

<div id="add-product">
    <div class="txt-heading">Add Product</div>
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><strong>Name</strong></th>
                <th><strong>Code</strong></th>
                <th><strong>Description</strong></th>
                <th style="text-align:right;"><strong>Price</strong></th>
                <th><strong>Options</strong></th>
            </tr>   
            <tr>
                <form name="myform">
                    <td contentEditable="true" data-id="product_name"></td>
                    <td contentEditable="true" data-id="product_code"></td>
                    <td contentEditable="true" data-id="product_desc"></td>
                    <td contentEditable="true" data-id="product_price" style="text-align:right;"></td>
                    <td><input type="checkbox" name="myCheckboxes[]" value="someValue2" /></td>
                </form>
            </tr>
        </tbody>
    </table>    
    <div id="btnSaveAction">Save to Database</div>
</div>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#btnSaveAction").on("click",function(){
    let params = "";
    // 拼接表格可编辑单元格数据
    $("td[contentEditable='true']").each(function(){
        if($(this).text() !== "") {
            params += params ? "&" : "";
            params += $(this).data('id')+"="+encodeURIComponent($(this).text());
        }
    });
    // 拼接复选框选中数据
    $("input[name='myCheckboxes[]']:checked").each(function(){
        params += params ? "&" : "";
        params += this.name+"="+encodeURIComponent(this.value);
    });
    if(params !== "") {
        $.ajax({
            url: "insert-row.html",
            type: "POST",
            data: params,
            success: function(response){
                $("#ajax-response").append(response);
                $("td[contentEditable='true']").text("");
                // 清空复选框选中状态
                $("input[name='myCheckboxes[]']").prop("checked", false);
            }
        });
    }
});
</script>

关键修改点

• 调整HTML中form标签位置，使其包裹整行单元格与复选框，结构更合理
• 添加复选框遍历逻辑，将选中项的name和value拼接到请求参数中
• 使用encodeURIComponent()对参数值编码，避免特殊字符导致的参数解析错误
• 成功提交后添加复选框状态清空逻辑

方法2：使用FormData（更简洁的表单数据处理） #

如果希望更高效处理表单数据，可使用FormData对象自动收集表单元素，同时手动添加表格单元格数据：

<div id="add-product">
    <div class="txt-heading">Add Product</div>
    <table cellpadding="10" cellspacing="1">
        <tbody>
            <tr>
                <th><strong>Name</strong></th>
                <th><strong>Code</strong></th>
                <th><strong>Description</strong></th>
                <th style="text-align:right;"><strong>Price</strong></th>
                <th><strong>Options</strong></th>
            </tr>   
            <tr>
                <form id="productForm">
                    <td contentEditable="true" data-id="product_name"></td>
                    <td contentEditable="true" data-id="product_code"></td>
                    <td contentEditable="true" data-id="product_desc"></td>
                    <td contentEditable="true" data-id="product_price" style="text-align:right;"></td>
                    <td><input type="checkbox" name="myCheckboxes[]" value="someValue2" /></td>
                </form>
            </tr>
        </tbody>
    </table>    
    <div id="btnSaveAction">Save to Database</div>
</div>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#btnSaveAction").on("click",function(){
    const formData = new FormData(document.getElementById('productForm'));
    // 添加表格可编辑单元格数据到FormData
    $("td[contentEditable='true']").each(function(){
        if($(this).text() !== "") {
            formData.append($(this).data('id'), $(this).text());
        }
    });
    $.ajax({
        url: "insert-row.html",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function(response){
            $("#ajax-response").append(response);
            $("td[contentEditable='true']").text("");
            $("#productForm")[0].reset();
        }
    });
});
</script>

优势

• FormData自动处理所有表单元素（包括复选框），无需手动拼接参数
• 支持后续扩展文件上传等复杂表单需求
• 代码更简洁，减少手动拼接易出现的错误

后端接收说明 #

无论使用哪种方法，后端都可通过POST参数获取对应数据：

• 表格数据：通过product_name、product_code等键获取
• 复选框数据：通过myCheckboxes[]数组获取（多复选框时返回所有选中值的数组）

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