JS 通过表单向 Action 传递元素

刺骨的言语ヽ痛彻心扉 2022-07-15 14:40 170阅读 0赞

JS 通过表单元素的 name 属性，向 Action 传递表单元素，实现数据传递。HTML 中元素的 name 属性，如 csUser.userId 等，实现表单元素与 Action 对应 Bean 的关联。
    HTML 源码如下
     <div class="panel-body">
        <form id="csUserForm" action="" method="post" enctype="multipart/form-data">
            <input type="text" hidden="hidden" id="userId" name="csUser.userId" value="${csUser.userId}">
            <table class="gdQueryTable">
                <tbody>
                <tr>
                    <td>
                        <label>部门ID：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateDepId" name="csUser.depId"
                               value="${csUser.depId}">
                    </td>
                    <td>
                        <label>名称：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateUserName" name="csUser.userName"
                               value="${csUser.userName}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>密码：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateLoginPwd" name="csUser.loginPwd"
                               value="${csUser.loginPwd}">
                    </td>
                    <td>
                        <label>性别：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateSexId" name="csUser.sexId"
                               value="${csUser.sexId}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>出生日期：</label>
                    </td>
                    <td>
    
                        <div class="input-group datetimepicker">
                            <input type="text" class="form-control" id="updateBirthday" name="csUser.birthday"
                                   value="<fmt:formatDate value="${csUser.birthday}" pattern="yyyy-MM-dd" />"
                                   οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly"
                                    style="width: 160px;">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
    
                        <%--<input type="text" class="form-control" id="updateBirthday" name="csUser.birthday" value="<fmt:formatDate value="${csUser.birthday}" pattern="yyyy-MM-dd" />" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly">--%>
                    </td>
                    <td>
                        <label>地址：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateAddress" name="csUser.address"
                               value="${csUser.address}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>电话：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateOfficeTel" name="csUser.officeTel"
                               value="${csUser.officeTel}">
                    </td>
                    <td>
                        <label>邮箱：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateEmail" name="csUser.email"
                               value="${csUser.email}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>手机号：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updatePhoneNum" name="csUser.phoneNum"
                               value="${csUser.phoneNum}">
                    </td>
                    <td>
                        <label>在岗状态：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updateIsDuty" name="csUser.isDuty"
                               value="${csUser.isDuty}">
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>岗位编号：</label>
                    </td>
                    <td>
                        <input type="text" class="form-control" id="updatePostId" name="csUser.postId"
                               value="${csUser.postId}">
                    </td>
                    <td>
                        <label>在岗日期：</label>
                    </td>
                    <td>
    
                        <div class="input-group datetimepicker">
                            <input type="text" class="form-control" id="updatePostIdOnDutyDate"
                                   name="csUser.onDutyDate"
                                   value="<fmt:formatDate value="${csUser.onDutyDate}" pattern="yyyy-MM-dd" />"
                                   οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly">
                            <span class="input-group-addon" for="updatePostIdOnDutyDate">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
    
                        <%--<input type="text" class="form-control" id="updatePostIdOnDutyDate"--%>
                               <%--name="csUser.onDutyDate"--%>
                               <%--value="<fmt:formatDate value="${csUser.onDutyDate}" pattern="yyyy-MM-dd" />"--%>
                               <%--οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" readonly="readonly">--%>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>备注：</label>
                    </td>
                    <td colspan="3">
                        <input type="text" class="form-control" id="updateRemark" name="csUser.remark"
                               value="${csUser.remark}" style="width: 500px">
                    </td>
                </tr>
                <tr class="selectgroup">
                    <td>
                        <label>角色：</label>
                    </td>
                    <td>
                        <select class="combobox  pull-left" id="updateRoleId" name="roleId" style="margin-left:10px">
                            <c:forEach items="${roleList}" var="role">
                                <option value="${role.roleId}"
                                        <c:if test="${role.roleId==roleId}">selected</c:if>>${role.roleName}</option>
                            </c:forEach>
                        </select>
                    </td>
    
                </tr>
                <tr>
                    <td colspan="4" align="center">
                        <a id="saveCsUser" type="submit" class="btn btn-lg btn-success" style="width: 200px">保存信息并关闭</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div> JS 源码如下
     <script type="text/javascript">
        $("#saveCsUser").click(function () {
            alert("begin ！！！")
            $.ajax({
                async:false,//=======同步
                url:'csUserAction_updateCsUserById.action',
                type:"POST",
                param:{},
    //          get data from jsp by form elem name
                data:$('#csUserForm').serialize(),
                success: function(result) {
                    alert(result);
                }
            });
            alert("end ！！！")
        });
    </script>