How to check if jquery ajax send POST request or not?

Question

I have created a simple Login Register program using PHP.

Now I am trying to validate if username already exists or not using jquery ajax. The jquery code runs but keeps on showing 'Checking Availability'.

Here is the code I have used. Please ignore the vulnerability and other errors in my PHP code ( which may not affect jquery ajax process ) as I am new to this. I'm working for improving those things.

Register.php

<?php
include('config.php');
if(isset($login_session))
{
header("Location: login.php");
}
if ($_SERVER["REQUEST_METHOD"] == "POST") 
{
$username = mysqli_real_escape_string($obj->conn,$_POST['username']); 
$password = mysqli_real_escape_string($obj->conn,$_POST['password']); 
$name     = mysqli_real_escape_string($obj->conn,$_POST['name']); 
$email    = mysqli_real_escape_string($obj->conn,$_POST['email']); 

$password = md5($password);

$sql ="SELECT uid from users WHERE username = '$username' or email = '$email'";
$register_user = mysqli_query($obj->conn,$sql) or die(mysqli_error($sql));
$no_rows = mysqli_num_rows($register_user);

if($no_rows == 0)
{
    $sql2 = "INSERT INTO users(username, password, name, email) values ('$username', '$password', '$name', '$email')";
    $result = mysqli_query($obj->conn, $sql2) or die(mysqli_error($sql2));
    echo "Registration Successfull!";
}
else{
    echo "Registration Failed.";
}
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Register</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/username.js"></script>
</head>
<body>
    <form action="register.php" method="post">
    <label>UserName:</label>
    <input type="text" id="username" name="username" required/>
    <span id="status"></span><br />
    <label>Password :</label>
    <input type="password" name="password" required/><br/>
    <label>Full Name :</label>
    <input type="text" name="name" required/><br/>
    <label>Email :</label>
    <input type="email" name="email" required/><br/>
    <input type="submit" value=" Submit "/><br />
    </form>
</body>
</html>

username.js

    $(document).ready(function()
{
$("#username").change(function() 
{ 

var username = $("#username").val();
var msgbox = $("#status");


if(username.length > 3)
{
$("#status").html('<img src="img/loader.gif" align="absmiddle">&nbsp;Checking availability...');

$.ajax({  
    type: "POST",  
    url: "php/username-check.php",  
    data: "username="+ username,  
    success: function(msg){  

   $("#status").ajaxComplete(function(event, request){ 

    if(msg == 'OK')
    { 
        msgbox.html('<img src="img/yes.png" align="absmiddle"> <font color="Green"> Available </font>  ');
    }  
    else  
    {  
         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  

   });
   } 

  }); 

}
else
{
$("#status").html('<font color="#cc0000">Enter valid User Name</font>');
}



return false;
});

});

username-check.php

    <?php 

include("config.php");

if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysqli_real_escape_string($obj->conn,$username);
$sql = "SELECT username FROM users WHERE username='$username'";
$sql_check = mysqli_query($obj->conn,$sql);

if (!$sql_check)))
{
    echo 'could not complete query: ' . mysqli_error($obj->conn,$sql_check);
}else{
    echo 'query successful!';
}

if(mysqli_num_rows($obj->conn,$sql_check))
{
echo '<font color="#cc0000"><b>'.$username.'</b> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>

and I want to know if there is a way to check if jQuery Ajax sent the POST request to that file or not?

Sure u can. With Chrome Devtools u can see every request made. If your request is working you should be able to see the `echo` part in the response. Also another hint to detect php errors is this post here:http://stackoverflow.com/questions/845021/how-to-get-useful-error-messages-in-php Add that part to your php code and just go to your file directly without ajax. If there are no errors your code is ok — Fabian Lurz, Jan 02 '15 at 10:55
You're registering in the `success` handler a new event handler for when an ajax requests completes. Remove the `.ajaxComplete()` part and only keep the `if ... else ...` and it should work — Andreas, Jan 02 '15 at 11:05

score 0 · Answer 1 · answered Jan 02 '15 at 11:01

Examine the request using a browser utility

 - Launch the chrome browser 
 - Right click and select inspect element menu
 - click on Network tab
 - Load your URL
 - Perform the Ajax request
 - You can see the request here (new request will be last in the list).
 - Click on it 
 - Right side window shows you request and response data

score 0 · Accepted Answer · answered Jan 02 '15 at 11:09

You are confusing ajax functions...Syntax will be like this

$.ajax({
    url: url,
    data: data, 
    type: "POST",
    beforeSend: function () {

    },
    success: function (returnData) {

    },
    error: function (xhr, ajaxOptions, thrownError) {

    },
    complete: function () {

    }
});

score 0 · Answer 3 · answered Jan 30 '15 at 16:16

0

You did correct.Easy way to check them is use firebug tool on your browser...I recommend firefox with firebug.install it first and then open it before you post your form.then goto console log and send your form...Check it out,best software.

answered Jan 30 '15 at 16:16

Aruna Warnasooriya

334
1
9

How to check if jquery ajax send POST request or not?

3 Answers3