ajax提交form并使用jQuery- validate验证表单

最新推荐文章于 2021-08-06 16:30:31 发布

め聆メ听ヅ＆

最新推荐文章于 2021-08-06 16:30:31 发布

阅读量180

点赞数

分类专栏：前端文章标签： jquery ajax js

本文链接：https://blog.csdn.net/qq_44963130/article/details/111565138

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

function familySave(nid) {
            $("#familyInputForm").validate({
                rules: {
                    phoneNumber: {checkPhone: true}
                },
                submitHandler: function (form) {//验证通过之后回调
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "${ctx}/ncgh/ncFamilyMember/save?needyWorkerId=${ncNeedyWorker.id}",
                        data: $('#familyInputForm').serialize(),
                        success: function (data) {
                            if (data.status == 0) {
                                alertx("保存成功");
                                $("#familyModal").modal('hide');
                                let html = "";
                                //清空表格数据
                                $("#familyTableBody").html("");
                                //动态刷新表格
                                for (let i = 0; i < data.data.length; i++) {
                                    html = "<tr>" + "<td>" + data.data[i].name + "</td>"
                                        + "<td>" + data.data[i].relationship + "</td>"
                                        + "<td>" + data.data[i].nation + "</td>"
                                        + "<td>" + data.data[i].identificationNumber + "</td>"
                                        + "<td>" + data.data[i].monthIncome + "</td>"
                                        + "<td>" + data.data[i].modelWorkerType + "</td>"
                                        + "<td>" + data.data[i].medicalInsuranceStatus + "</td>"
                                        + "<td>" + data.data[i].phoneNumber + "</td>"
                                        + "<td>" + data.data[i].maritalStatus + "</td>"
                                        + "<td>" + data.data[i].householdType + "</td>"
                                        + "<td>" + data.data[i].phoneNumber + "</td>"
                                        + "<td>" + data.data[i].identity + "</td>"
                                        + "<td>" + "<a οnclick=\"showDetail('" + data.data[i].id + "')\">" + "详情" + "</a> "
                                        + "<a data-toggle=\"modal\" data-target=\"#familyModal\" href=\"${ctx}/ncgh/ncFamilyMember/form?id=" + data.data[i].id + "\">修改</a> "
                                        + "<a οnclick=\"confirmx('确认要删除吗？',familyDelete,'" + data.data[i].id + "')\">删除</a>" + "</td>" + "</tr>";
                                    $("#familyTableBody").append(html);//将数据追加进表格
                                }
                            }
                        },
                        error: function () {
                            alertx("出错了！");
                        }
                    });
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            })
            $('#familyInputForm').submit();
        }

<table id="familyTable" class="table table-striped table-bordered table-condensed">
        <thead>
        <tr></tr>
        <tr>
            <th>姓名</th>
            <th>关系（是户主的）</th>
            <th>民族</th>
            <th>身份证号</th>
            <th>月收入</th>
            <th>劳模类型</th>
            <th>健康状况</th>
            <th>医保状况</th>
            <th>婚姻状况</th>
            <th>户口类型</th>
            <th>手机号码</th>
            <th>人员身份</th>
            <shiro:hasPermission name="ncgh:ncNeedyWorker:edit">
                <th>操作</th>
            </shiro:hasPermission>
        </tr>
        </thead>
        <tbody id="familyTableBody">
        <c:forEach items="${ncNeedyWorker.ncFamilyMemberList}" var="ncFamilyMember">
            <tr>
                <td>
                        ${ncFamilyMember.name}
                </td>
                <td>
                        ${ncFamilyMember.relationship}
                </td>
                <td>
                        ${ncFamilyMember.nation}
                </td>
                <td>
                        ${ncFamilyMember.identificationNumber}
                </td>
                <td>
                        ${ncFamilyMember.monthIncome}
                </td>
                <td>
                        ${ncFamilyMember.modelWorkerType}
                </td>
                <td>
                        ${ncFamilyMember.healthCondition}
                </td>
                <td>
                        ${ncFamilyMember.medicalInsuranceStatus}
                </td>
                <td>
                        ${ncFamilyMember.maritalStatus}
                </td>
                <td>
                        ${ncFamilyMember.householdType}
                </td>
                <td>
                        ${ncFamilyMember.phoneNumber}
                </td>
                <td>
                        ${ncFamilyMember.identity}
                </td>
                <shiro:hasPermission name="ncgh:ncNeedyWorker:edit">
                    <td>
                        <a onclick="showDetail('${ncFamilyMember.id}')">详情</a>
                        <a data-toggle="modal" data-target="#familyModal"
                           href="${ctx}/ncgh/ncFamilyMember/form?id=${ncFamilyMember.id}">修改</a>
                        <a onclick="confirmx('确认要删除吗？', familyDelete,'${ncFamilyMember.id}')">删除</a>
                    </td>
                </shiro:hasPermission>
            </tr>
        </c:forEach>
        </tbody>
    </table>