使用AJAX将父窗体和模式窗口数据传递到服务器

Question

我有一个包含多个表行的动态表单页面，用户在其中通过选择要更新的行的复选框来更新状态。 单击更新按钮时，我打开一个jQuery模式窗口供用户从下拉列表中选择状态并输入注释。 我能够通过AJAX将模态窗口数据传递到我的servlet，但是我不知道如何获取复选框值。

如何将父表单中的复选框值和模式窗口中的其他数据传递给Java servlet，以便更新适当的数据库记录？ 我想使用AJAX，以便父表单不会为用户重新加载。

提前致谢！

模态窗口和AJAX更新：

$(function() {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 'auto',
        width: 'auto',
        modal: true,
        buttons: {
            "Update Status": function() {
                dataString = $("#statusForm").serialize();

                $.ajax({
                    type: 'POST',
                    url: 'updateStatus',
                    data: dataString,
                    dataType: 'json',
                    success: function(data) {alert(data);}
                });
                $(this).dialog("close");
            },
            Cancel: function() {$(this).dialog("close");}
        },
        close: function() {$(this).dialog("close");}
    });
    $("#update-status")
            .button()
            .click(function() {
        $("#dialog-form").dialog("open");
    });
});

编辑：

如您所见，后台选中了4个项目，其中模式窗口位于顶部，要求提供其他信息。所选项目需要使用模式窗口中的信息进行更新。 每个复选框都有其自己的唯一值，该值对应于数据库表中的记录ID。

编辑2：

父表单-HTML代码段：

<form name="OptionList">
<table id="statusTable">
    <thead>
        <tr>
            <th>Option</th>
            <th>Type</th>
            <th>Timestamp</th>
            <th>Entry Type</th>
            <th>User Profile</th>
        </tr>
    </thead>
    <tr>
        <td><input type="checkbox" value="19"></td>
        <td>DO</td>
        <td>5/14/13 4:31 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="61" ></td>
        <td>DO</td>
        <td>5/14/13 4:50 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="37"></td>
        <td>DO</td>
        <td>5/14/13 5:03 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
    <tr>
        <td><input type="checkbox" value="157"></td>
        <td>DO</td>
        <td>5/14/13 5:04 PM</td>
        <td>A</td>
        <td>user profile</td>
    </tr>
</table>

Answer 1

您目前正在做的是将整个表格序列化并将其传递给您的模式：

dataString = $("#statusForm").serialize();

相反，您需要做的就是简单地传递您感兴趣的行的数据。为此，您可以为每行分配数字ID，并解析具有该父ID的复选框的数据。

查看此解决方案： 传递单元格值以使用Ajax Post更新表