Im using JS ajax and php for a login and register system for a game im building.
My problem i have is im not sure the ajax request is actually proccessing the php code i have pointed it to. The correct things happen on the webpage when i run the code, but i have put a var_dump() into the php to make sure the data is actually there but i have nothing show up from the php on the webpage as you usually would with var_dump()
Heres the html im using:
<article id="container">
<div id="load-new" class="game_menu">
<h1>LOAD/NEW</h1>
</div>
<div id="reg" class="game_menu">
<h1>REGISTER</h1>
<form name="register" method="post" action="">
<label for="usernamesignup" class="uname">Your username</label>
<input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="Username" />
<label for="emailsignup" class="youmail"> Your email</label>
<input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="domain@mydomain.com"/>
<label for="passwordsignup" class="youpasswd">Your password </label>
<input id="passwordsignup" name="passwordsignup" required="required" type="password"/>
<label for="passwordsignup_confirm" class="youpasswd">Please confirm your password </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password"/>
<button id="reg_submit" type="button">Register</button>
</form>
</div>
<div id="login" class="game_menu">
<h1>LOGIN</h1>
<form name="login" method="post" action="">
<label for="username" id="username_label">Username:</label>
<input type="text" name="username" id="username" value=""/>
<label for="password" id="password_label">Password:</label>
<input type="password" name="password" id="password" value=""/>
<button id="login_submit" type="button">Login</button>
</form>
</div>
<div id="access" class="game_menu">
<h1>ACCESS</h1>
<button id="login_but" type="button">Login</button>
<button id="reg_but" type="button">Register</button>
</div>
heres the JS im using with the ajax request:
this.login_ajax = function()
{
var username = $("#username").val();
var password = $("#password").val();
var dataString = 'username='+ username + '&password='+ password;
alert(dataString);
$.ajax({
type:"POST",
url:"PHP/login.php",
data: dataString,
success: function() {
$('#login').hide();
$('#load-new').show();
},
error: function(){
alert("ERROR");
}
});
};
and here is the php file is runs:
if ((isset($_POST['username'])) && (strlen(trim($_POST['username'])) > 0)) {
$username = stripslashes(strip_tags($_POST['username']));
} else {$username = 'No username entered';}
if ((isset($_POST['password'])) && (strlen(trim($_POST['password'])) > 0)) {
$password = stripslashes(strip_tags($_POST['password']));
} else {$password = 'No password entered';}
var_dump($username);
Like i said, the ajax request returns successful, but im receiving no dumps from the php file which is making me think, is the php file actually running?
Thanks
Run the php file directly from the browser to check the results. This is easier if you use GET, at least for development.
And your code does not interact with the info received from the server. The callback should have a parameter
success: function (data) {
alert(data);
}
EDIT
AJAX activities normally consist of executing a programme in the server (in your case login.php), and retrieving the results (a string). But asking information from the server and doing nothing with it would be pretty stupid, right? So this is why we define a callback function for the success.
Imagine you have a .php file that looks a reference of a book in a database, and prints the name of the author. What you retrieve in the client is the name of the author... so one naive callback function could be:
success: function (author) {
alert('that book was written by ' + author);
}
The first parameter of the success callback is the string received from server. In case you want to return multiple values instead of a string, you should use the $.getJSON function, or specify in $.ajax that you want to parse the result as JSON.
Within success(), you can check to see the data that is being passed from PHP to your HTML page. You have to setup success function(data) {...}, and do something like console.log(data); within the success function itself. Then open up your browser and see what the console.log is spitting out.
And if you work with Google Chrome - I highly recommend downloading the Chrome plugin PHP Console for checking future PHP errors and warnings. It may not be perfect but i think it's awesome!
There is a simpler way to check AJAX requests than checking the result via the AJAX callbacks with console.log, and you'll be able to see all the details of the request/response, including HTTP status codes (so you can see if you're not getting a 500 server error).
Add a button to your HTML and wire it up in jQuery to make the AJAX request on click:
$('#testButton').click(function(){ $.ajax(options); });
Most browsers now have Developer Tools (Firebug in Firefox?)
On Chrome:
On Internet Explorer:
On Firefox:
This will be the best way to look into what exactly is happening behind your AJAX requests.
Don't get me wrong - you can (and should) still use the AJAX callbacks and console.log (or console.dir in Chrome) to debug your AJAX requests, but when things just aren't working, devtools are always the easiest and fastest way to "look under the hood"!