[英]NO refresh the page when success ajax
I have a ajax section to submit data in laravel. 我有一个ajax部分,以在laravel中提交数据。 I want if I submit success then don't reload the page and submit the error then reload the page.
我想如果我提交成功,则不要重新加载页面并提交错误,然后重新加载页面。 In the code below, when the error reloads the page correctly, I am having a problem in the success case, the page must not be reloaded, but the result is reloaded.
在下面的代码中,当错误正确地重新加载页面时,在成功的情况下我遇到了问题,不能重新加载页面,但是必须重新加载结果。 I have added the line e.preventDefault () then true in the success case but wrong in the error case
我添加了e.preventDefault()行,然后在成功的情况下返回true,但在错误的情况下返回错误
$(document).ready(function() {
$('form').submit(function(e){
//e.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:'{{ route('contracts.store') }}',
method: "POST",
data: form_data,
dataType: "json",
success: function(data) {
$("#mgsContract").text("Add successfully");
$("#hideForm").css("visibility", "visible");
$("#hideForm").css("height", "auto");
$("#result-contract-id").val(data.contract_obj);
},
error: function(data) {
$("#mgsContract").text("Something wrong");
}
})
});
});
Add back that e.preventDefault()
to prevent the form submission, and in the error case, call location.reload()
. 重新添加该
e.preventDefault()
以防止表单提交,并在错误情况下调用location.reload()
。 (Or if you want to submit the form conventionally in the error case, use e.target.submit();
instead. Since that's calling submit
on the DOM element [not a jQuery wrapper], it won't call your submit
handler again. [This is one of the differences between programmatically calling submit
on a DOM element vs. calling it on a jQuery object.]) (或者,如果您想在错误情况下按常规提交表单,请使用
e.target.submit();
代替。由于这是在DOM元素上调用submit
[不是jQuery包装器,因此它不会再次调用您的submit
处理程序[这是在DOM元素上以编程方式调用submit
与在jQuery对象上以调用方式之间的区别之一。]
when you use ajax, laravel automatically responds in JSON for validation errors. 当您使用ajax时,laravel会自动以JSON响应验证错误。 therefore to access the validation errors you can use
this.responseJSON.errors
in error section of your ajax. 因此,要访问验证错误,可以在ajax的error部分中使用
this.responseJSON.errors
。 there is no need to reload the page to access validation errors. 无需重新加载页面即可访问验证错误。
however in any case if you need to reload or go to specific location you can use window.location
但是在任何情况下,如果您需要重新加载或转到特定位置,都可以使用
window.location
window.location.href = "an address"; // going to specific location
window.location.reload(); //reloading the page
an ajax example is the following, in which a loop for showing all errors inside the form is specified. 下面是一个ajax示例,其中指定了一个用于显示表单内所有错误的循环。
$("#form_id").submit(function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
method: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function (data) {
// code in the case of success
},
error: function (err) {
if (err.status == 422) { // when status code is 422, it's a validation issue
// code in the case of error
console.log(err.responseJSON);
// you can loop through the errors object and show it to the user
console.warn(err.responseJSON.errors);
// display errors on each form field
$.each(err.responseJSON.errors, function (i, error) {
var el = $(document).find('[name="' + i + '"]');
el.removeClass('is-valid');
el.addClass('is-invalid');
var parent = el.parents('.form-group');
parent.append("<small class='error-message text-right text-danger d-block pr-5 ' role='alert'>" + error + "</small >");
});
}
},
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.