JS 通过表单元素的 name 属性,向 Action 传递表单元素,实现数据传递。HTML 中元素的 name 属性,如 csUser.userId 等,实现表单元素与 Action 对应 Bean 的关联。 HTML 源码如下JS 源码如下<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>
<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>
JS 通过表单向 Action 传递元素
最新推荐文章于 2022-10-01 21:56:42 发布