问当我实现Ajax调用时，提交表单不起作用
EN

Stack Overflow用户

提问于 2020-09-15 20:12:36

回答 1查看 38关注 0票数 1

大家好。

我正在制作一个包含动态信息的表单来编辑某些类，但是当我调用ajax时，它不起作用。

下面是表单的html：

<form id="userDataForm" name="userDataForm" th:action="@{/admin/addUpdateUser}" th:object="${registerForm}"
          method="post">
        <div id="userDialog" class="modal-dialog" style="margin-left: 25%;">
            <div class="modal-content" style="width: 900px;">
                <div class="modal-header">
                    <h5 class="modal-title theme-color" th:text="#{profile.title}">Crear/editar usuario</h5>

                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="padding: 0px 15px;">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                            <input type="hidden" name="id" id="id"/>
                            <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12" style="margin-top: 10px">
                                <input class="form-control" type="text" name="username" id="username"
                                       th:placeholder="#{profile.field.username}" placeholder="Username"
                                       required="required"/>
                            </div>

                            <div id="selectRole">
                                <div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <div style="margin-top: 5px;">
                                        <label for="role" th:text="#{profile.field.rol}"
                                               class="theme-color"
                                               style="font-size: 110%; padding-right: 10px;">Rol</label>
                                        <select class="form-control" id="role" name="role"
                                                data-style="btn-primary" style="display: initial; width: 90%"
                                                required="required" onchange="showManagerOptions(this)">
                                            <option th:each="rol: ${roles}"
                                                    th:text="${rol}" th:value="${rol}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div id="managerInformation" style="display: none;">
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input class="form-control" type="text" name="address" id="address"
                                           th:placeholder="#{profile.field.address}" placeholder="Address"/>
                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input class="form-control" type="text" name="city" id="city"
                                           th:placeholder="#{profile.field.city}" placeholder="City"/>
                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input class="form-control" type="text" name="postalCode" id="postalCode"
                                           th:placeholder="#{profile.field.postal_code}" placeholder="Postal code"/>
                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input class="form-control" type="text" name="areaType" id="areaType"
                                           th:placeholder="#{profile.field.area_type}" placeholder="Area type"/>
                                </div>
                                <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <input class="form-control" type="text" name="phoneNumber" id="phoneNumber"
                                           th:placeholder="#{profile.field.phone_number}"
                                           placeholder="Phone number"/>
                                </div>
                            </div>


                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input class="form-control" type="text" name="firstName" id="firstName"
                                       th:placeholder="#{profile.field.first_name}" placeholder="First Name"
                                       required="required"/>
                            </div>
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input class="form-control" type="text" name="lastName" id="lastName"
                                       th:placeholder="#{profile.field.last_name}" placeholder="Last Name"
                                       required="required"/>
                            </div>
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input class="form-control" type="email" name="email" id="email"
                                       th:placeholder="#{profile.field.email}" placeholder="Email" required="required"/>
                            </div>
                            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input class="form-control" type="password" name="password" id="password"
                                       th:placeholder="#{profile.field.password}" placeholder="Password"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-right" style="margin-bottom: 10px;">
                        <button class="btn btn-default btn-sm" data-dismiss="modal" aria-hidden="true"
                                th:text="#{common.button.cancel}">Cancel
                        </button>
                        <input type="submit" id="saveUser" class="btn btn-primary btn-sm"
                               th:value="#{common.button.save}" value="Save"/>
                    </div>
                </div>
            </div> <!--.modal-content-->
        </div> <!--.modal-dialog-->
    </form>

这里是输入模式表单加载器：

function showEditUserModal() {

    if (selectedRow == null) return;

    var idUser = selectedRow.id;
    getInfoUser(idUser);
    var role = $(usersTable.row('.selected').data()[4]).text();

    document.getElementById("selectRole").style.display = "none";
    if (role === 'ROLE_MANAGER') {
        getInfoManager(idUser);
        document.getElementById('managerInformation').style.display = "block";
    } else
        document.getElementById('managerInformation').style.display = "none";
    $('#userModal').modal().show();
}

ajax调用来填充输入：

function getInfoUser(id) {
    var url = appPath + 'admin/userInfo/' + id;
    $.ajax({
        url: url,
        dataType: 'json',
        success: function (user) {
            $('#username').val(user.username);
            $('#firstName').val(user.firstName);
            $('#lastName').val(user.lastName);
            $('#email').val(user.email);
            $('#password').val("");
            $('#role').val(user.role);
        },
        error: function () {
            alert(genericErrorMessage);
        }
    });
}

function getInfoManager(id) {
    var url = appPath + 'admin/managerInfo/' + id;
    $.ajax({
        url: url,
        dataType: 'json',
        success: function (manager) {
            $('#address').val(manager.address);
            $('#city').val(manager.city);
            $('#postalCode').val(manager.postalCode);
            $('#areaType').val(manager.areaType);
            $('#phoneNumber').val(manager.phoneNumber);
        },
        error: function () {
            alert(genericErrorMessage);
        }
    });
}

在此之前，一切都很完美，我得到了输入中的所有信息，但提交按钮不起作用，这里是提交函数。

$('#userDataForm').submit(function (event) {

    if (!$(this)[0].checkValidity()) {
        $(this).find(':submit').click();
        return false;
    }

    //-- stop submit and do ajax call
    event.preventDefault();
    event.stopPropagation();

    var addUpdateUserUrl = appPath + "admin/addUpdateUser";
    var formData = $(this).serialize();

    $('#userModal').modal('hide');

    $.ajax({
        url: addUpdateUserUrl,
        type: 'POST',
        data: formData
    })
        .done(
            function (resultado, status, jqXHR) {
                if (!status) {
                    alert(genericErrorMessage);
                    return;
                }
                if (resultado == "ok:correct") {
                    document.location.href = appPath + "admin/userlist";
                    return;
                } else if (resultado == "error:login") {
                    document.location.href = appPath + "login";
                    return;
                }
                alert(genericErrorMessage);
                document.location.href = appPath + "admin/userlist";
            })
        .fail(function (jqXHR, status) {
            alert(genericErrorMessage);
            document.location.href = appPath + "admin/userlist";
        });
});

我是使用ajax的新手，我使用的是bootstrap datatables API，我很困惑为什么它会加载，但当我单击submit按钮时，它甚至不会调用submit函数。

每一个想法和帮助都是值得感谢的。

谢谢大家！

javascript

jquery

ajax

datatables

腾讯云BI 新春特惠

首年仅需9.9元，续费同价

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-15 20:26:28

可能你的函数正在变得递归。将.submit()绑定到表单，阻止事件传播，然后尝试触发触发按钮的事件"submit“。看到这里有什么问题了吗？我强烈建议改为监听按钮的单击，然后使用checkValidity()，然后直接发布AJAX，如果您将通过ajax发送它，则不需要实际的表单事件。

$('#saveUser').click(function (event) {
//-- stop submit and do ajax call
event.preventDefault();
event.stopPropagation();

if (!$(this)[0].checkValidity()) {
    return false;
}

var addUpdateUserUrl = appPath + "admin/addUpdateUser";
var formData = new FormData($('#userDataForm')[0]);

$('#userModal').modal('hide');

$.ajax({
    url: addUpdateUserUrl,
    type: 'POST',
    data: formData,
    processData: false
})
    .done(
        function (resultado, status, jqXHR) {
            if (!status) {
                alert(genericErrorMessage);
                return;
            }
            if (resultado == "ok:correct") {
                document.location.href = appPath + "admin/userlist";
                return;
            } else if (resultado == "error:login") {
                document.location.href = appPath + "login";
                return;
            }
            alert(genericErrorMessage);
            document.location.href = appPath + "admin/userlist";
        })
    .fail(function (jqXHR, status) {
        alert(genericErrorMessage);
        document.location.href = appPath + "admin/userlist";
    });
});