大家好。
我正在制作一个包含动态信息的表单来编辑某些类,但是当我调用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的新手,我使用的是bootstrap datatables API,我很困惑为什么它会加载,但当我单击submit按钮时,它甚至不会调用submit函数。
每一个想法和帮助都是值得感谢的。
谢谢大家!
发布于 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";
});
});
https://stackoverflow.com/questions/63909223
复制