$ .ajax发布请求未发送POST数据

Question

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

Answer 1

   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.

Answer 2

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.

Answer 3

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