javascript - 当我实现 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,
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 的新手,我正在使用引导数据表 API,我很困惑为什么它会加载,但是当我单击提交按钮时它甚至没有调用提交函数。
感谢每一个想法和帮助。
谢谢大家!
解决方案
可能您的函数正在变得递归。您将 .submit() 绑定到表单,防止事件传播,然后尝试触发触发按钮的事件“提交”。看看这里有什么问题吗?我强烈建议更改监听按钮的单击,然后检查有效性(),然后直接发布 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";
});
});
推荐阅读
- r - 为R中的大数据框逐行查找和替换条件列值
- ruby-on-rails - 通过中间表在同一模型上建立多对多关系
- multithreading - 为内核保留硬件线程(“核心”或“处理器”)(IE,防止调度程序将用户工作分配给该硬件线程)
- javascript - 将 npm 模块集成到纯 Javascript 应用程序中,不知道如何修复错误
- firewall - NAT防火墙后面的Apache Geode
- css - 部署的 gh-pages 站点看起来与 localhost 不同(React 应用程序)
- google-cloud-platform - 使用服务帐户错误设置计划查询 PermissionDenied: 403 The caller does not have permission in data_transfer_service
- salesforce - Salesforce Marketing Cloud API - 订阅者重写
- qt - QT,使用带有自定义消息处理程序的 qDebug() 不显示行/文件/函数信息
- python - 计算两个 3d 轨迹之间表面积的可靠方法?