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

Question

我有一个 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');
    }

Answer 1

你应该阻止默认的表单处理，例如：

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

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

Answer 2

我认为您需要将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 错误，请根据 jQuery 文档包含“错误”回调选项。

Answer 3

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