如何解决实现Ajax调用时，提交表单不起作用
大家好。
我正在制作一个包含动态信息的表单来编辑某些类，但是当我进行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">×</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,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”。看到这里有什么问题吗？我强烈建议更改监听按钮的单击，然后单击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";
});
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
