javascript - 在同一文件中使用 AJAX 调用用户定义的 PHP 函数

Question

我正在尝试用 PHP 处理表单，但是我不希望在按下提交按钮时刷新页面。相反，我想检查电子邮件和密码是否正确；然后让用户登录或显示错误消息(示例中为 login_error)。

下面的所有代码片段都在同一个文件中，我的问题是如何使用 AJAX 调用 php 函数来处理同一文件中的表单？

表格:

<!-- Model dialog for login button -->
    <div class="modal fade" id="login" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form class="form-horizontal" role="form" id="login_form" action="index.php" method="POST">
                    <div class="modal-header">
                        <h4>Login</h4>
                    </div>

                    <div class="modal-body">
                        <div class="form-group" id="login_error">
                            <label for="login-username" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10" style="color: red;">
                                Oops! Your username or password is incorrect, please try again!
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="login-username" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-10">
                                <input required type="text" class="form-control" name="login-email" placeholder="Username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="login-password" class="col-sm-2 control-label">Password</label>
                            <div class="col-sm-10">
                                <input required type="password" class="form-control" name="login-password" placeholder="Password">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" href = "#register" data-toggle="modal" formnovalidate>Register</button>
                        <button type="submit" class="btn btn-success" name="login_submit" id="login_submit">Login</button>
                    </div>
                </form>
            </div>               
        </div>
    </div>

我要调用的PHP:

<?php
    if (isset($_POST["login_submit"])) {
        $email = $_POST["login-email"];
        $password = $_POST["login-password"];

        if (login($email, $password)) {
            die("<script>location.href = 'LoginSystem/cookiecontrol.php?action=set&email=$email'</script>");    // Set the cookie
        } else {
            echo "<script>$('#login_error').show();</script>";
        }
    }
?>

JQuery:

 <script>
        $("#login_error").hide();

        $("#login_submit").click(function (e) {
            e.preventDefault();
            $.ajax({url: '/PHP%20Files/Computing%20Project%20-%20Website/ICTeacher/LoginSystem/wrongpassword.php',
                data: {action: 'index.php'},
                type: 'post',
                success: function (output) {
                    alert(output);
                }
            });
        });

    </script>

Answer 1

在同一页面中通过 ajax 请求处理 php 代码相当简单，但您必须确保只返回您想要的数据，而不是很容易发生的整个页面。 为此，请使用 ob_clean 丢弃脚本中当前点的输出缓冲区，然后确保发送数据后退出。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST["login_submit"] ) ) {

        ob_clean();/* discard any output there may have been so far in the document */

        $email = $_POST["login-email"];
        $password = $_POST["login-password"];

        if ( login( $email, $password ) ) {
            die("<script>location.href = 'LoginSystem/cookiecontrol.php?action=set&email=$email'</script>");    // Set the cookie
        } else {
            echo "<script>$('#login_error').show();</script>";
        }


         /* the ajax request should only process to this point */
        exit();
    }
?>