AJAX jQuery php登录表单

Question

hello i have a little bit of a trouble finding a specific answer so .. i hope this is not a repost, i have the following login.php code

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

i would like it to be accessed by axaj, and my "echos" to be inside a previously empty div, the login form html page

<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>

my so far javascript is

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

but it does nothing .. i need when the user clicks the login button and gets only the pass wrong .. to let him be wrong for three times .. but at every turn tell him . in that empty div .. that he was wrong...

Do you know what i mean?

Answer 1

The problem is on your PHP (login.php).

You should remove the function loginBackUser : you're not calling that method. And change the extract method on login.php to extract($_POST) .

eg:

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

EDIT

This isn't the best way to make a login system, I hope you are just studying/testing :)

Answer 2

so ... in stead of using ajax which i don't know that well, i made something that might be called unprofessional by others, which is <div id="resultShow"> <?php if(isset($_POST['loginUserSubmit'])){ require_once('/path/to/Class.BackUser.php'); $bkUser = new BackUser(); $bkUser->loginBackUser($_POST); } ?> </div> <div id="resultShow"> <?php if(isset($_POST['loginUserSubmit'])){ require_once('/path/to/Class.BackUser.php'); $bkUser = new BackUser(); $bkUser->loginBackUser($_POST); } ?> </div> <div id="resultShow"> <?php if(isset($_POST['loginUserSubmit'])){ require_once('/path/to/Class.BackUser.php'); $bkUser = new BackUser(); $bkUser->loginBackUser($_POST); } ?> </div> and this way .. whatever the method loginBackUser() echos, is in the place that i wanted it to be, but i would still like with your help, if you will, to find a way to skip that refresh php needs to do everything :D

Answer 3

I'm not sure how you handle the server side validation but I simplified your code just to make a small demonstration of ajax get/post on same page. This is just an example and can be done in many other ways.

From .serialize() documentation:

No submit button value is serialized since the form was not submitted using a button.

Here's the full code I came up with

<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> 

You should make a reference to jQuery library with

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

Always better to wrap your script in $(document).ready() function like this

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

In your case, it's as follows

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

On server-side there are many ways to see if the form was posted or not. Simply use

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

and wrap your logic in it. If the form was not submitted do something else.

Give this a try and if that works, implement the validations along with extras on the working version.