JS 通过表单向 Action 传递元素

最新推荐文章于 2022-10-01 21:56:42 发布
稚枭天卓
最新推荐文章于 2022-10-01 21:56:42 发布
阅读量509
点赞数
分类专栏：前台技术 HTML编程 JS入门文章标签： AJAX data form name HTML
本文链接：https://blog.csdn.net/u013630349/article/details/52861906
版权
JS入门同时被 3 个专栏收录
30 篇文章 0 订阅
订阅专栏
前台技术
29 篇文章 0 订阅
订阅专栏
HTML编程
12 篇文章 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>