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();
    }
?>

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

1 个答案: