Php AJAX表单重新加载我的页面：(

我有一个ajax表单，它从我的表单submit中读取数据

我希望在提交表单时，它会显示来自php回调的响应。例如，如果用户输入了密码，则更新表并返回类似于

echo“成功更新密码”的内容；

我曾尝试阅读不同的帖子/博客，了解如何做到这一点，但我的错误不断发生。当我输入密码或个人资料图片后单击“保存”按钮时，它会不断刷新页面

我的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>

<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>

    //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');
    }

我的表单提交.php代码：

<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>

<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>

    //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');
    }

//将用户图像上载到我们的/uploads目录
$uploaddir='uploads/'；
$uploadfile=$uploaddir.basename（$_FILES['fileToUpload']['name']）；
$save_to_database=（“uploads/”$_FILES[“fileToUpload”][“name”]）；
$normalPassword=mysqli\u real\u escape\u字符串（$con，$\u POST[“securePassword\u Val]”）；
$pwd=密码\u散列（$normalPassword，密码\u默认值）；
$username=$\会话[“username”]；
//运行检查列表，这样如果他们不想更改当前的某个值，就不必键入值
如果（isset（$\u POST['fileToUpload']）和isset（$\u POST['securePassword\u Val']））{
如果（move_upload_file（$_FILES['fileToUpload']['tmp_name']，$uploadfile））{echo'成功上载图像'；}其他{die（'无法上载文件。
请与网站管理员联系以获取更多信息。'）；}
$query=“更新用户设置密码='$pwd'，配置文件\u图片='$save\u to_database'，其中username='$username'；
$success['updatedAll']=“成功更新了您的密码和个人资料图片！”；
}
else if（空（$\u POST['fileToUpload']）和！空（$\u POST['securePassword\u Val']））{
$query=“updateusers SET password='$pwd'，其中username='$username'；
$success['updatedPwd']=“成功更新了密码！”；
}
else if（空（$\u POST['securePassword\u Val']）和！（空（$\u POST['fileToUpload']））{
如果（move_upload_file（$_FILES['fileToUpload']['tmp_name']，$uploadfile））{echo'成功上载图像'；}其他{die（'无法上载文件。
请与网站管理员联系以获取更多信息。'）；}
$query=“更新用户设置配置文件\u图片=”$save\u to_database”，其中username=“$username'”；
$success['updatedPpic']=“成功更新了您的个人资料图片！”；
}
else if（空（$\u POST['securePassword\u Val']）和空（$\u POST['fileToUpload']））{
$errors['ETYEATH']='必须输入一个值才能更改！'；
}
如果（计数（$errors）>0）{
如果（！empty（$_SERVER['HTTP_X_REQUESTED_WITH']）和&strtolower（$_SERVER['HTTP_X_REQUESTED_WITH']）='xmlhttprequest'）{
回音$错误；
出口
}
}否则{
//在这里写下我们的成功回报
成功的回声；
$result=mysqli_query（$con，$query）或die（'error'）；
}

您应该防止默认表单处理，例如：

<script>    
//JQuery Script to submit Form
$(document).ready(function () {
    $("#myAccount").validate({
        submitHandler : function () {
            // your code

            return false; // Prevent default form handling
        }
    });
});
</script>

//提交表单的JQuery脚本
$（文档）.ready（函数（）{
$（“#我的帐户”）。验证({
submitHandler:函数（）{
//你的代码
返回false；//防止默认表单处理
}
});
});

我认为您需要将

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错误，请包含“ERROR”根据jQuery文档的回调选项。

为了防止页面刷新，您可以将事件处理程序附加到submit按钮的onclick事件。应该给按钮一个id，并且它的类型应该从“submit”更改为“button”

任何控制台错误？脚本是否正确加载并且在加载文档之前加载？我得到了答案

jQuery.Deferred异常：$（…）。验证不是函数类型错误：$（…）.validate不是一个函数

，它只是意味着您在使用时没有加载验证插件。好的，但是使用

或

？我认为您必须使用第二个函数，否则jQuery validate不会知道您已提交表单。a type=“button”按钮不会导致验证程序正在等待的表单提交事件。请检查浏览器控制台是否存在任何其他错误。如果您有脚本错误，则不会运行任何验证或ajax。我正在获取

jQuery。延迟异常：$（…）。验证不是函数类型错误：$（…）.validate不是一个函数

听起来好像你没有在你的页面中包含jquery验证插件文件。你应该有一个

不，我知道为什么。这是因为我在我的主题中加载了另一个js文件，导致它没有在默认的jquery库中加载AJAX。我想我不能再在这个主题中使用AJAX了。