使用jQuery AJAX对用户进行身份验证不起作用


Authenicating user using jQuery AJAX not working

我正在尝试使用jQuery包装的AJAX对用户进行身份验证,以调用查询MySQL数据库的PHP脚本。我不熟悉这些技术中的任何,但我(在某种程度上)设法使它们单独工作,但我无法使jQuery、AJAX和HTML正常工作。

[编辑:]我听从了Trinh Hoang Nhu的建议,添加了一个return false;语句来禁用"提交"按钮。所有以前的错误都修复了,我无法正确地获得AJAX返回的对象。

HTML

这是我使用的HTML片段:

<form id="form" method='post'>
    <label>Username:</label>
    <input id="user" name="user" type="text" maxlength="30" required /> <br />
    <label>Password:</label>
    <input id="pass" name="pass" type="password" maxlength="30" required /> <br />
    <input id="url" name="url" type="text" value="<?php echo $_GET['url'] ?>" hidden />
    <input name="submit" type="submit" value="I'm done">
  </form>

jQuery/AAJAX

以下是我的jquery代码,用于使用AJAX对用户进行身份验证(很抱歉,如果因为选项卡而导致缩进混乱):

function changeMessage(message) {
    document.getElementById("message").innerHTML = message; }
$(document).ready(function() {
    $("#form").submit(function() {
        changeMessage("Checking");
        //check the username exists or not from ajax
        $.post("/stufftothink/php/AJAX/login.php",
                    {user: $("#user").val(), pass: $("#pass").val(), url: $("#url") },
                    function(result) {
                        //if failed
                        if (result === 'false') {
                            changeMessage("Invalid username or password. Check for typos and try again");
                            $("#pass").val(""); }
                        //if authenticated
                        else {
                            changeMessage("Authenticated");
                            window.location.href = result; } 
                    } );
        //to disable the submit button
        return false;
    }   );
} )

PHP

这是我的PHP脚本,它被称为:

<?php 
ob_start();
session_start();
$user = $_POST['user'];
$pass = md5($_POST['pass']);
mysql_connect('localhost', 'root', '');
mysql_select_db('stufftothink');
$query = "select * from users where user = '$user' and pass = '$pass'";
$result = mysql_query($query);
$i = 0;
while ($row = mysql_fetch_array($result)) {
  $i = 1; }
if ($i == 1) {
  $_SESSION['user'] = $user; 
    $invalid_urls = array('register.php', 'login.php');
    $url = $_REQUEST['url']; //not sure whether _GET or _POST
    if (in_array($url, $invalid_urls)) {
        echo '/stufftothink/profile.php'; }
    else {
    echo '/stufftothink/'.$url; }
    }
else {
  echo 'false'; }
mysql_close();
?>

编辑

在这个问题上我得到了很多反对票。我不小心提交了没有填写解释的问题。我回去编辑了它,但当我回来时,已经有4张反对票了。仅仅过了几分钟。是我做错了什么,还是前5分钟有问题?

首先,如果要使用ajax提交表单,则必须使用提交函数中的return false。否则,您的浏览器将处理它并将您重定向到另一个页面。

如果你想从PHP返回一个对象,你必须使用json_encode将其转换为json,例如:

//PHP
$return = array("url" => "http://www.google.com");
echo json_encode($return);
//would echo something like {"url":"http://www.google.com"}
//JS
$.post(url, data, function(data){
  alert(data.url);
});

函数上没有结束的;

应为:

function changeMessage(message) {
    document.getElementById("message").innerHTML = message; 
};
$(document).ready(function() {
    $("#form").submit(function() {
        changeMessage("Checking");
        //check the username exists or not from ajax
        $.post("/stufftothink/php/AJAX/login.php",
               {user: $("#user").val(), pass:$("#pass").val() },
               function(result) {
              //if failed
              if (result === 'false') {
                        changeMessage("Invalid username or password. Check for typos and try again");
                    $("#pass").val("");
              }
              //if authenticated
              else {
                                changeMessage("Authenticatred");
                window.location.href = "/stufftothink/" +  result; 
              } 
       });
   });
});

不确定这是否能解决问题,但这是我唯一想到的问题。