Ajax 避免重新加载页面
Ajax avoid reload the page
我试图在 ajax 上对后端进行验证,并发送数据并正常工作,但是当来自后端的数据 returns 时我遇到了问题,因为它正在重新加载页面并删除返回的消息
<script>
$(document).ready(function() {
// Cache selectors to make them a bit shorter and more performant
$pwd_error = $('#password_result_error').hide();
$pwd_blank = $('#current_password_blank').hide();
$('#new_password').focus(function(event) {
data = $('#current_password').val();
var len = data.length;
if (len < 1) {
//alert("Password cannot be blank");
$pwd_blank.show();
} else {
$pwd_blank.hide();
}
$('#change_password').click(function() {
if ($('#new_password').val() != $('#confirm_new_password').val()) {
$pwd_error.show();
} else {
$pwd_error.hide();
}
});
});
// Attach listener globally (and only once)
$('form#form_change_password').submit(function(e) {
if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
e.preventDefault();
} else {
var change_password = $("#form_change_password").serialize();
$.post(
"backend/ajax/update_password.php",
change_password
).done(function(data) {
$("#change_password_result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
}
});
});
</script>
<hr>
<div class="container text-center">
<h1><?php $lang ['change_password']; ?></h1>
<form id="form_change_password">
<div class="form-group">
<!-- <label for="current_password"><?php echo $lang 'current_password']; ?> </label> -->
<input type="password" class="form-control" id="current_password" name="current_password" placeholder="<?php echo $lang ['current_password']; ?>">
</div>
<div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $lang ['current_password_can_not_be_blank']; ?></div>
<div class="form-group">
<label for="new_password"><?php echo $lang ['new_password']; ?></label>
<input type="password" class="form-control" id="new_password" name="new_password" placeholder="<?php echo $lang ['new_password']; ?>">
</div>
<div class="form-group">
<label for="confirm_new_password"><?php echo $lang ['confirm_new_password']; ?></label>
<input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" placeholder="<?php echo $lang ['confirm_new_password']; ?>">
</div>
<div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $lang ['password_do_not_match']; ?></div>
<div id="change_password_result"></div>
<div class="text-center">
<button type="submit" id="change_password" class="btn btn-success"><?php echo $lang ['change_password']; ?></button>
</div></form>
</div>
我试图阻止提交时重新加载,但它不通过 ajax 发送数据,这段代码现在工作正常,但我需要阻止提交时重新加载,但也不影响 ajax在上面。
如何防止页面在提交时重新加载,而不影响发送到后端的 ajax 数据?
$('form#form_change_password').submit(function (e) {
e.preventDefault();
if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
// Don't call the api if form has error
return
}
var change_password = $("#form_change_password").serialize();
$.post(
"backend/ajax/update_password.php",
change_password
).done(function (data) {
$("#change_password_result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});
我试图在 ajax 上对后端进行验证,并发送数据并正常工作,但是当来自后端的数据 returns 时我遇到了问题,因为它正在重新加载页面并删除返回的消息
<script>
$(document).ready(function() {
// Cache selectors to make them a bit shorter and more performant
$pwd_error = $('#password_result_error').hide();
$pwd_blank = $('#current_password_blank').hide();
$('#new_password').focus(function(event) {
data = $('#current_password').val();
var len = data.length;
if (len < 1) {
//alert("Password cannot be blank");
$pwd_blank.show();
} else {
$pwd_blank.hide();
}
$('#change_password').click(function() {
if ($('#new_password').val() != $('#confirm_new_password').val()) {
$pwd_error.show();
} else {
$pwd_error.hide();
}
});
});
// Attach listener globally (and only once)
$('form#form_change_password').submit(function(e) {
if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
e.preventDefault();
} else {
var change_password = $("#form_change_password").serialize();
$.post(
"backend/ajax/update_password.php",
change_password
).done(function(data) {
$("#change_password_result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
}
});
});
</script>
<hr>
<div class="container text-center">
<h1><?php $lang ['change_password']; ?></h1>
<form id="form_change_password">
<div class="form-group">
<!-- <label for="current_password"><?php echo $lang 'current_password']; ?> </label> -->
<input type="password" class="form-control" id="current_password" name="current_password" placeholder="<?php echo $lang ['current_password']; ?>">
</div>
<div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $lang ['current_password_can_not_be_blank']; ?></div>
<div class="form-group">
<label for="new_password"><?php echo $lang ['new_password']; ?></label>
<input type="password" class="form-control" id="new_password" name="new_password" placeholder="<?php echo $lang ['new_password']; ?>">
</div>
<div class="form-group">
<label for="confirm_new_password"><?php echo $lang ['confirm_new_password']; ?></label>
<input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" placeholder="<?php echo $lang ['confirm_new_password']; ?>">
</div>
<div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i> <?php echo $lang ['password_do_not_match']; ?></div>
<div id="change_password_result"></div>
<div class="text-center">
<button type="submit" id="change_password" class="btn btn-success"><?php echo $lang ['change_password']; ?></button>
</div></form>
</div>
我试图阻止提交时重新加载,但它不通过 ajax 发送数据,这段代码现在工作正常,但我需要阻止提交时重新加载,但也不影响 ajax在上面。 如何防止页面在提交时重新加载,而不影响发送到后端的 ajax 数据?
$('form#form_change_password').submit(function (e) {
e.preventDefault();
if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
// Don't call the api if form has error
return
}
var change_password = $("#form_change_password").serialize();
$.post(
"backend/ajax/update_password.php",
change_password
).done(function (data) {
$("#change_password_result").html(data);
}).fail(function () {
//alert("Error submitting forms!");
})
});