CrowderSoup
CrowderSoup

Reputation: 164

$.ajax Post Request not sending POST data

I'm trying to streamline my login system by using ajax to handle to back and form requests to the server. I want to POST my form data to a PHP page, then return true/false and 'Not Enough Data' if the correct parameters didn't get passed.

My problem is that my AJAX request isn't sending the data that I'm giving it to send.

Here is my JavaScript function:

function confirm_login()
{
   val_UName = document.login_form.username.value;
   val_Pwd = document.login_form.password.value;

   var result = null;
   var scriptUrl = "login_confirm.php";
   $.ajax({
     url: scriptUrl,
     type: 'post',
     data: ({username : val_UName, password : val_Pwd}),
     dataType: 'html',
     async: false,
     success: function(data) {
         result = data;
     }
   });
   result = result.split('|');
   if(result[1] == 'true')
     window.location = "index.php";
   else
     alert('Could not log you in!\n\n'+result[0]);
}

This function is called in the onclick event of the submit button on the form. Now, I've used the debug tools in Chrome and I KNOW that val_UName and val_Pwd are getting the form values. So it's definitely a breakdown between here and the login_confirm.php

Just for completeness' sake, here's what's going on in login_confirm.php (I left out the lines that are connecting to the DB and closing the connection):

$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);

if($username == '' || $password == '')
      echo 'Not Enough Data|';

$login_query = "SELECT * FROM users WHERE u_name = '$username' AND pwd = '$password'";
$result = mysql_query($login_query);
$result_rows = mysql_num_rows($result);

if($result_rows > 0)
{
   session_start();
   $row = mysql_fetch_assoc($result);
   $_SESSION['loggedin'] = true;
   $_SESSION['uname'] = $row['u_name'];
   $_SESSION['uID'] = $row['pkid'];
   $_SESSION['email'] = $row['email'];
   $_SESSION['roleID'] = $row['fk_roleid'];
   echo 'true';
}
else
{
   echo 'false';
}

Anyone know what's going on here or seen anything like this before?

PS. I've even tried changing to using GET and that still doesn't work...

Upvotes: 0

Views: 4789

Answers (3)

Boyd
Boyd

Reputation: 763

Code under the ajax request won't wait for the ajax request to be completed before it is being executed. So I think your ajax request is working, but nothing happens with the data because that piece of code was executed already.

My suggestion is:

function confirm_login()
{
   val_UName = document.login_form.username.value;
   val_Pwd = document.login_form.password.value;

   var scriptUrl = "login_confirm.php";
   $.ajax({
     url: scriptUrl,
     type: 'post',
     data: ({username : val_UName, password : val_Pwd}),
     dataType: 'html',
     async: false,
     success: function(data) {
         runCode(data);
     }
   });

   function runCode(var result){
      result = result.split('|');
      if(result[1] == 'true')
        window.location = "index.php";
      else
        alert('Could not log you in!\n\n'+result[0]);
      }
   }
}

Edit: Function shouldn't be whithin the other function, but I think you can fix that yourself.

Upvotes: 2

troynt
troynt

Reputation: 1912

   result = result.split('|');
   if(result[1] == 'true')
     window.location = "index.php";
   else
     alert('Could not log you in!\n\n'+result[0]);

is run before the callback returns.

Try putting that logic inside the success callback or define a success function with that logic inside.

Upvotes: 4

Quasipickle
Quasipickle

Reputation: 4498

Don't wrap your data in parentheses. Just the {} will suffice.

Upvotes: 0

Related Questions