jQuery UI对话框中的AJAX调用 - php

我正在使用jQuery UI模式对话框在HTML和PHP脚本之间进行交互的用户登录系统上工作。最近,我将所有用户功能移到了一个PHP文件,该文件是我以前在标头标记中保存的。

如果有人输入有效的用户名/密码,我可以使登录功能正常工作,但是现在我正尝试解决其他可能性,即有人输入了有效的用户名但密码不正确,或者他们输入的用户名不正确存在。

我遇到的问题是对话框脚本上的AJAX调用。我想将登录表单提交到同一页面,user.php,或者登录用户,或者返回将在同一对话框中填充div的错误消息。

现在,我的代码将返回错误消息,但它还会返回用户表单的副本。不太确定我在这里做错了什么...
任何输入将不胜感激。

编辑:决定继续并发布整个user.php,因为基于一个答案进行更改使此文件添加的html完全消失。我现在猜测可能是我做错了几件事:

    <html>
    <span id="user">
            <ul>
                <?php
                    //if user is logged in, show name and Log Out option, else show Log In and Sign Up options
                    if(isset($_COOKIE["user"])) {
                        setSessionUserData($_COOKIE["user"]);
                        echo "<li>Logged in as {$_SESSION["username"]}</li>";
                        echo "<li>&nbsp;|&nbsp;</li>";
                        echo "<li><a href='#' id='logout_link'>Log Out</a></li>";
                    } else {
                        echo "<li><a href='#' id='login_link'>Log In</a></li>";
                        echo "<li>&nbsp;|&nbsp;</li>";
                        echo "<li><a href='#'>Sign up</a></li>";
                    }
                ?>
            </ul>
    </span>

    <div id="login_dialog" title="Existing User">
        <form id="login_form">
            <fieldset>
                <label for="userid">Username</label>
                <input type="text" name="username" id="username" />
                <label for="pw">Password</label>
                <input type="password" name="pw" id="pw" />
            </fieldset>
        </form>
        <span class = "error"></span>
    </div>
    <div id="logout_dialog" title="Log Out">
        <p><span class="ui-icon ui-icon-alert alert-icon"></span>Are you sure you want to log out?</p>
    </div>

    <script>
    $(function() {
        var username = $("#username"),
        password = $("#pw"),
        loginFields = $([]).add(username).add(password);

        $("#login_link").click(function() {
            $("#login_dialog").dialog("open"); 
        });

        $("#logout_link").click(function() {
            $("#logout_dialog").dialog("open");
        });

        $("#login_dialog").dialog({
            autoOpen: false,
            height: 200,
            width: 250,
            resizeable: false,
            modal: true,
            buttons: {
                Submit: function() {
                    $.post("auth.php",
                            {
                            username: $("#username").val(),
                            password: $("#pw").val()
                            },
                            function(result) {
                                if(result=='success'){
                                      window.location='Practice.php';
                                }
                                else {
                                    $(".error").html(result);
                                }
                            }
                          )
                    },
                Cancel: function(){
                    $(this).dialog("close");
                }                
            },
            close: function() {
                loginFields.val("");
            }
        });

        $("#logout_dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 150,
            resizeable: false,
            buttons: {
                Okay: function() {
                    window.location = "logout.php";
                },
                Cancel: function() {
                    $(this).dialog("close");
                }
            }
        });

    });
</script>
</html>

<?php

function setSessionUserData($cookie) {
    $con = connect();

    $query = "SELECT * FROM practice_user WHERE userid = '$cookie'";
    $result = mysqli_query($con, $query);
    $userData = mysqli_fetch_array($result);

    $_SESSION["username"] = $userData["username"];
    $_SESSION["fname"] = $userData["first_name"];
    $_SESSION["lname"] = $userData["last_name"];
}

?>

...以及PHP:

if($_SERVER["REQUEST_METHOD"] == "POST") {
$user = test_input($_POST["username"]);
$pass = test_input($_POST["password"]);

//check if correct login
if (chkLogin($user, $pass)) {
    $id = getUser($user, $pass);
    setUserCookie($id);
    header("Location: Practice.php");
}
//check if username exists but incorrect password entered
else if (chkUser($user)) {
    echo "Username and password do not match";
}
//Or else return that username doesn't exist
else {
    echo "Username does not exist";
}

}

我的代码中还有其他功能可以处理验证等。
如果我需要发布这些,请告诉我。

参考方案

你可以试试这个吗

您无法在调用php文件本身的ajax中重定向页面,因此重定向部分移到了javascript端。

jQuery,

    $("#login_dialog").dialog({
            autoOpen: false,
            height: 200,
            width: 250,
            resizeable: false,
            modal: true,
            buttons: {
                Submit: function() {
                    $.post("auth.php",
                            {
                            username: $("#username").val(),
                            password: $("#pw").val()
                            },
                            function(result) {
                                if(result=='success'){
                                    window.location='Practice.php';
                                }else{
                                   $(".error").html(result);
                                   }
                               }
                          )
                    },
                Cancel: function(){
                    $(this).dialog("close");
                }                
            },
            close: function() {
                loginFields.val("");
            }
        });

创建一个名为auth.php的新页面,其中包括依赖项php函数。

   <?php

    if($_SERVER["REQUEST_METHOD"] == "POST") {
    $user = test_input($_POST["username"]);
    $pass = test_input($_POST["password"]);

    //check if correct login
    if (chkLogin($user, $pass)) {
        $id = getUser($user, $pass);
        setUserCookie($id);
        echo "success";
    }
    //check if username exists but incorrect password entered
    else if (chkUser($user)) {
        echo "Username and password do not match";
    }
    //Or else return that username doesn't exist
    else {
        echo "Username does not exist";
    }
}
?>

jQuery-PHP类选择器问题 - php

所以我有这样的事情:<?php foreach($post_array as $post): ?> <div class="postBodyWrapper"> <div class="vid-link"> <script type="text/javascript&#…

jQuery / Ajax请求被发送两次 - php

我已经一遍又一遍地扫描我的代码,但似乎找不到问题。当我单击链接#add-user-btn时,文件actions.php被调用了两次(因此PHP脚本执行了两次)。这是脚本:我想它与ajax请求前面的javascript有关吗?$(function () { $("#add-user-btn").click(function (e) { e.…

jQuery ajax无法正常工作 - php

我制作了一个测试jQuery ajax脚本,并在提交时将其附加到表单上,但是尽管我在函数末尾添加了return false,但页面在提交时仍保持刷新状态,并且也没有得到任何响应。表单如下所示:<form id="LogInForm" onsubmit="return LogIn();"> <input…

jQuery不起作用 - php

我正在使用带有ajax的jquery。有时,给出错误$未定义。这是我的代码:<script language="javascript" type="text/javascript"> var base_path="<? echo $this->baseUrl().'/…

Div单击与单选按钮相同吗? - php

有没有一种方法可以使div上的click事件与表单环境中的单选按钮相同?我只希望下面的div提交值,单选按钮很丑代码输出如下:<input id="radio-2011-06-08" value="2011-06-08" type="radio" name="radio_date&#…