使用ajax提交登录表单

Question

我在其中一种表单中有此javascript。 这是一个登录表单，我使用API​​样式从表单本身获取URL（“不确定我是否理解正确”），但我会将代码附加到下面

var formup = $('#loginfrom');
formup.submit(function () {
    $.ajax({
        type: formup.attr('method'),
        url: formup.attr('action'),
        data: formup.serialize(),
        success: function (data) {
            alert('you have successfuly logged in');
            window.location = "profile.html";
        }
    });

    return false;
});

这是我从api文件调用的登录功能

if(!mysql_fetch_array($result)){
return $res;
}
else
    return $resc;

其中$ res返回“错误”，而$ resc返回“正确”

和我的api.php

if(!isset($function))
        $resp['err'] = "Function: ".$action." does not exist";
    else
        $resp = $function($request);

当我输入正确的用户名和密码时，它可以正常工作，并定向到用户配置文件。

但是，如果我输入的用户名或密码不正确，我不知道如何处理。

我确实认为从php返回的内容应该做一些事情告诉javascript登录不起作用，然后再做其他事情

请提供有关此问题的一些帮助，我们将不胜感激。

Answer 1

该请求总是成功的，因此，您必须检查data变量的值以重定向到错误页面

...
success: function (data) {
  if ( data == 'correct') {
    alert('you have successfuly logged in');
    window.location = "profile.html";
  } else {
     // handle error
  }
}
...

Answer 2

将您的登录代码更改为此

if(!mysql_fetch_array($result)){
  echo 'failure'; die;
}
else    {
    echo 'success'; die;
}

并将您的ajax成功更改为此

success: function (data) {
        if (data == 'success') {
            alert('you have successfuly logged in');
            window.location = "profile.html";
        } else {
             alert('Login Failed');
        }
    }

Answer 3

使用datatype作为json从php获取返回值。 在下面的代码中检查我的建议。

$.ajax({
        type: formup.attr('method'),
        url: formup.attr('action'),
        data: formup.serialize(),
        dataType: 'json',
        success: function (data) {

            if(data.error == 0) {
                alert('you have successfuly logged in');
                window.location = "profile.html";
            } else {

                alert("error");
            }
        }
    });

在您的php文件中，将$ res和$ resc转换为数组，然后再使用json_encode。 像这样，

if(!mysql_fetch_array($result)){
    echo array('value'=>$res,'error'=>0);
}
else
    echo array('value'=>$res,'error'=>1);

Answer 4

您可以对数据执行某些操作，也可以让PHP返回401状态，如果使用PHP而不是401状态返回某些内容，则可以让JavaScript检查返回的文本：

var formup = $('#loginfrom');
formup.submit(function () {
    $.ajax({
        type: formup.attr('method'),
        url: formup.attr('action'),
        data: formup.serialize(),
        success: function (data) {
            console.log(data);
            // check your console (press F12 in Chrome or Firefox with firebug plugin)
            // do something if the data is valid.
            window.location = "profile.html";
        }
    });

    return false;
});

如果在PHP中登录失败，并且您想返回401（导致不调用javascript成功函数，但是在JS中可能需要使用fail / error函数。

header("HTTP/1.0 401 Unauthorized");

并且您需要在javaScript中添加一个失败回调，以便用户知道登录失败：

    $.ajax({
        ...
        success: function (data) {
          ...
        },
        error: function(){
           //inform the user
        }
    });