AJAX jQuery php登录表单 - AJAX jQuery php Login form

你好，我在找到具体答案时有点困难，所以。。我希望这不是一个转发，我有以下登录php代码

function loginBackUser($arr){
global $link;
extract($arr);
$msg = '';
$pass = md5($pass);
$pass = md5($pass);
$pass = sha1($pass);
$pass = md5($pass);
$pass = md5($pass);
$pass = sha1($pass);
$pass = sha1($pass);
$pass = sha1($pass);
$sql = "SELECT * FROM `table` WHERE `email`='$email' AND `pass`='$pass'";
$sqlEmail = "SELECT * FROM `table` WHERE `email`='$email'";
$resEmail = mysqli_query($link,$sqlEmail) or die("SQLEmail gresit");
$res = mysqli_query($link,$sql) or die("SQL gresit");
if(mysqli_num_rows($res) == 1){
    $row = mysqli_fetch_assoc($res);
    session_start();
    $id=$row['id'];
    $_SESSION['id'] = $row['id'];
    $_SESSION['name'] = $row['name'];
    $sqlEmptyAttempts = "UPDATE `table` SET `attempts` = '0' WHERE `id` = '$id'";
    $resEmptyAttempts = mysqli_query($link,$sqlEmptyAttempts) or die("SQLEmptyAttempts gresit");
    header('Location:/oproit/index.php?pag=dash_homepage');
}else if(mysqli_num_rows($resEmail) == 1){
    $row2 = mysqli_fetch_assoc($resEmail);
    $id=$row2['id'];
    $sqlVerifyAttempts = "SELECT `attempts` FROM `table` WHERE `id` = '$id'";
    $resVerifyAttempts = mysqli_query($link,$sqlVerifyAttempts) or die("SQLVerifyAttempts gresit");
    $row3 = mysqli_fetch_assoc($resVerifyAttempts);
    if($row3['attempts']<3){
        $attempts = $row3['attempts']+1;
        $sqlSetNewAttempts = "UPDATE `table` SET `attempts` = '$attempts' WHERE `id` = '$id'";
        $resSetNewAttempts = mysqli_query($link,$sqlSetNewAttempts) or die("SQLSetNewAttempts gresit");
        echo "wrong password";
    }else{
        $sqlEmptyAttempts = "UPDATE `table` SET `attempts` = '0' WHERE `id` = '$id'";
        $resEmptyAttempts = mysqli_query($link,$sqlEmptyAttempts) or die("SQLEmptyAttempts gresit");
        echo "dude be serious"; // here will be some mail function but for now i just want it to work with ajax
    }
}else{
    echo "your email is not in our data base";
}
$thread_id = mysqli_thread_id($link);
mysqli_kill($link,$thread_id);
mysqli_close($link);
}

我希望它能被axaj访问，并且我的"echos"位于以前空的div中，即登录表单html页面

<form id="loginUser" method="post" action="login.php" onsubmit="return false;">
<input type="text" id="email" name="email" class="textField" value="email" />
<input type="password" id="pass" name="pass" class="textField" value="" />
<input type="submit" id="loginUserSubmit" onclick="isSession('loginUser','resultShow')" name="loginUserSubmit" value="Da Bah!" /></form><div id="resultShow">sas</div>

到目前为止，我的javascript是

function isSession(selector,responseElement) {
    var e = document.getElementById(selector);
    if(!e){
        alert('there is no element with the id='+selector);
    }
    var b = document.getElementById(responseElement);
    if(!b){
        alert('there is no element with the id='+responseElement);
    }
    $(e).submit(function (event) {
        $.ajax({
            type: $(e).attr('method'),
            url: $(e).attr('action'),
            data: $(e).serialize(),
            success: function(data){
                $(b).html(data);
            },
            error: function() {
                alert("Error occured")
            }
        });
        event.preventDefault();
    });
}

但它什么都没做。。当用户点击登录按钮，只得到错误的通行证时，我需要。。让他错三次。。但每次都要告诉他。在那个空的div中。。他错了。。。

你知道我的意思吗？

问题出在您的PHP（login.PHP）上。

您应该删除函数loginBackUser：您没有调用该方法。并将login.php上的extract方法更改为extract($_POST)。

例如：

<?php
if (isset($_POST['pass']) && isset($_POST['email'])) {
    global $link;
    extract($_POST);
    ...
}

编辑

这不是制作登录系统的最佳方式，我希望您只是在研究/测试：）

所以。。。我没有使用我不太熟悉的ajax，而是制作了一些可能被其他人称为不专业的东西，即<div id="resultShow"> <?php if(isset($_POST['loginUserSubmit'])){ require_once('/path/to/Class.BackUser.php'); $bkUser = new BackUser(); $bkUser->loginBackUser($_POST); } ?> </div>这样。。无论loginBackUser（）echos方法是什么，都在我想要的地方，但如果你愿意的话，我仍然希望在你的帮助下，找到一种跳过刷新php需要做所有事情的方法：D

我不确定您是如何处理服务器端验证的，但我简化了您的代码，只是为了在同一页面上进行ajax get/post的小演示。这只是一个例子，可以通过许多其他方式实现。

来自.serialize（）文档：

由于表单未提交，因此未序列化任何提交按钮值使用按钮。

这是我想出的的完整代码

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<?php
  if(isset($_POST["email"]) && isset($_POST["pass"]))
  {
    echo "Email:".$_POST["email"]."<br/>Password:".$_POST["pass"];
  }
  else
  {
?>
<form id="loginUser" method="post" action="login.php">
<input type="text" id="email" name="email" class="textField" value="email" />
<input type="password" id="pass" name="pass" class="textField" value="" />
<input type="submit" id="loginUserSubmit" name="loginUserSubmit" value="Da Bah!" />
</form><div id="resultShow"></div>
<script>
$(document).ready(function(){
    $("#loginUser").submit(function (event) {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){
                $("#resultShow").html(data);
            },
            error: function() {
                alert("Error occured")
            }
        });
        event.preventDefault();
    });
});
</script>
<?php
  }
?>
</body>
</html>

您应该使用参考jQuery库

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

总是最好用$(document).ready()函数包装你的脚本，就像这个一样

$(document).ready(function()
{
  //your code here
}
);

在您的情况下，如下

$(document).ready(function(){
    $("#loginUser").submit(function (event) {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data){
                $("#resultShow").html(data);
            },
            error: function() {
                alert("Error occured")
            }
        });
        event.preventDefault();
    });
});

在服务器端，有很多方法可以查看表单是否已发布。只需使用

if(isset($_POST["email"]) && isset($_POST["pass"]))

并将您的逻辑封装在其中。如果表单没有提交，请执行其他操作。

尝试一下，如果有效的话，在工作版本上实现验证和附加功能。