我有一个ajax表单，可以从我的表单提交中读取数据。
我想在提交表单时这样做，它会显示我的php回调的响应。例如，如果用户输入密码，请更新表并返回echo 'Successfully updated your password';之类的内容
我曾尝试阅读有关如何执行此操作的不同帖子/博客但我的错误仍然存在。在输入密码或个人资料图片后单击保存按钮时，它会一直刷新页面。
我的HTML表单代码 ：
<div class="modal fade -dark" id="ben2" data-animate-show="fadeInRight" data-animate-hide="fadeOutRight">
<div class="modal-dialog">
<div class="modal-content -padded">
<div class="modal-body _text-center">
<form class="form-horizontal" enctype="multipart/form-data" id="myAccount" method="post" action="">
<div class="form-group">
<label class="col-md-12 control-label" style="color: white; opacity: 100%;">Username</label>
<div class="col-md-12">
<input type="text" class="form-control" value="<?php foreach($users as $user) { echo $user[1]; } ?>" disabled>
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" for="example-email" style="color: white; opacity: 100%;">Email</label>
<div class="col-md-12">
<input type="email" id="example-email" name="example-email" class="form-control" value="<?php foreach($users as $user) { echo $user[3]; } ?>" disabled>
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" style="color: white; opacity: 100%;">New Password</label>
<div class="col-md-12">
<input type="password" class="form-control default my-password required" name="securePassword_Val" id="form-element-colors-info" placeholder="Enter your new password here">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" style="color: white; opacity: 100%;">Profile Pic</label>
<div class="col-md-12">
<input class="form-control default profile-pic required" type="file" name="fileToUpload" id="form-elements-file">
</div>
</div>
<div class="form-group">
<label class="col-md-12 control-label" style="color: white; opacity: 100%;">User Level</label>
<div class="col-md-12">
<input type="text" class="form-control" value="<?php echo $member_config->userLevelValidation($con); ?>" disabled>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="modal-footer _text-center _margin-bottom-none">
<div class="btn-group">
<button class="btn -dark" data-dismiss="modal" aria-hidden="true" title="Close Without saving changes"><i class="fa fa-times"></i></button>
<button class="btn -dark" type="submit" name="SaveUserChanges" title="Save changes to your account"><i class="fa fa-save"></i></button>
</div>
</div>
</form>
<div id="myAccountResponse"></div>
</div>
</div>
</div>
正如您所看到的，我有一个名为myAccountResponse的div id，我想要显示回调消息。
我的AJAX代码是 ：
<script>
//JQuery Script to submit Form
$(document).ready(function () {
$("#myAccount").validate({
submitHandler : function () {
// your function if, validate is success
$.ajax({
type : "POST",
url : "includes/form_submit.php",
data : $('#myAccount').serialize(),
success : function (data) {
$('#myAccountResponse').html(data);
}
console.log('AJAX ERROR');
});
}
});
});
</script>
我的form_submit.php代码 ：
//Upload users image to our /uploads directory
$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['fileToUpload']['name']);
$save_to_database = ("uploads/" . $_FILES["fileToUpload"]["name"]);
$normalPassword = mysqli_real_escape_string($con, $_POST["securePassword_Val"]);
$pwd = password_hash($normalPassword, PASSWORD_DEFAULT);
$username = $_SESSION["username"];
//Run a list of checks so they don't have to type in a value if they don't want to change a current certain value
if(isset($_POST['fileToUpload']) & isset($_POST['securePassword_Val'])) {
if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) { echo 'Successfully uploaded image'; } else { die('Could not upload file.<br>Contact the Administrator of the website for more infomration.'); }
$query = "UPDATE users SET password = '$pwd', profile_picture = '$save_to_database' WHERE username='$username'";
$success['updatedAll'] = 'Successfully updated your password and profile picture!';
}
else if (empty($_POST['fileToUpload']) & !empty($_POST['securePassword_Val'])) {
$query = "UPDATE users SET password = '$pwd' WHERE username='$username'";
$success['updatedPwd'] = 'Successfully updated your password!';
}
else if (empty($_POST['securePassword_Val']) & !(empty($_POST['fileToUpload']))) {
if(move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) { echo 'Successfully uploaded image'; } else { die('Could not upload file.<br>Contact the Administrator of the website for more infomration.'); }
$query = "UPDATE users SET profile_picture = '$save_to_database' WHERE username='$username'";
$success['updatedPpic'] = 'Successfully updated your profile picture!';
}
else if (empty($_POST['securePassword_Val']) & empty($_POST['fileToUpload'])) {
$errors['etyBoth'] = 'You must enter a value to change!';
}
if(count($errors) > 0) {
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
echo $errors;
exit;
}
} else {
//Write our success return here
echo $success;
$result = mysqli_query($con, $query) or die('error');
}
答案 0 :(得分：0)
您应该阻止默认表单处理，例如：
<script>
//JQuery Script to submit Form
$(document).ready(function () {
$("#myAccount").validate({
submitHandler : function () {
// your code
return false; // Prevent default form handling
}
});
});
</script>
答案 1 :(得分：0)
我认为您需要将return false;放在submitHandler的末尾，告诉它不要进行正常的回发：
submitHandler : function () {
// your function if, validate is success
$.ajax({
type : "POST",
url : "includes/form_submit.php",
data : $('#myAccount').serialize(),
success : function (data) {
$('#myAccountResponse').html(data);
}
});
return false; //prevent default postback
}
同样console.log('AJAX ERROR');位于错误的位置，如果您检查了控制台，可能会导致语法错误。如果要检查ajax错误，请包含＆＃34;错误＆＃34;根据jQuery文档的回调选项。
答案 2 :(得分：0)
要阻止页面刷新，可以将事件处理程序附加到提交按钮的onclick事件。该按钮应该被赋予一个id，其类型应该从'submit'更改为'button'