Ajax/JSON request to php processing page
Question
I am creating a phone app using html5, ajax, JSON and php for my university degree. This app has to communicate with a mysql database so ajax Json is being used to communicate with the php file that then processes the queries to the database. This will then be packaged using the phonegap cloud service.
The login page uses a form to get username and password, jQuery and JSON then passes that to the login.php via a script on the login page. I can get the jQueryworking to a degree, but once I do the SQL query on the php file the login seems to hang. I have tested the php process a number of times by manually putting the input variable in the php and running the page in a browser which works fine. You can see the login at mobile app login .
I am presently using $.getJSON to send variables from the input form but would prefer to use a post but cannot quite figure that out. also unlike using form action post where i can then use echo outs to ensure the php is doing its job i cant find how to allow me to use a similar way to check my php process because of using jquery/JSON, any guidance would be appreciated.
Following are my scripts, I have been trying to get this to work for 3 days now and just can't seem to get this to work even though I have tried many different scripts found on many forums, any help would be greatly appreciated
jquery/JSON script************************
$(document).ready(function() {
$("#submit").click(function() {
if($("#childs_name").val()=="" || $("#password").val()=="") {
$("#add_err").html("Please enter childsname and password");
return false;
}else{
$("#add_err").html('<img src="images/ajax-loader.gif" width="16" height="16" alt=""/>');
var childsname=$("#childs_name").val();
var password=$("#password").val();
$.getJSON("includes/login.php",{username:childsname,password:password},function(json) {
//Parse JSON data if json.response.error = 1 then login successfull
if(json.response.error == "1")
{
$("#add_err").html( "Welcome "+childsname+"");
//login successfull, write code to Show next page here
window.location= "menu.html";
}else
if(json.response.error == "2")
{
$("#add_err").html( "Details do not exsist in Database. Please contact the School");
}
});//get json
}
});//submit click
});//doc ready
PHP ********************************
//include_once 'db_connect.php';
if(!isset($_GET['submit'])) {
//check if childsname is empty
if(empty($_GET['childsname'])) {
echo '{"responce":{"error": "1"}}';
}else{
$childs_name = $_GET['childsname'];
echo '{"responce":{"error": "0"}}';
}//end of chidsname
//check if password is empty
if(empty($_GET['password'])) {
echo '{"responce":{"error": "1"}}';
}else{
$password = $_GET['password'];
echo '{"responce":{"error": "0"}}';
}//end of password
//query database
$query = "SELECT * FROM app Where child_name = '$childs_name'";
$results = mysqli_query($mysqli, $query);
// Loop through results
// if($result->num_rows >= 1){
// $row = $result->fetch_array(MYSQLI_ASSOC);
// if ($row['childs_name'] = '$childs_name'){
//
while ($row = mysqli_fetch_array($results, MYSQLI_BOTH)){
if($_GET['childsname'] == $row['child_name']) {
echo '{"responce":{"error": "1"}}';
// header("Location: ../menu.html");
}else{
echo '{"responce":{"error": "2"}}';
}
}
//**************************************************************submit
echo '{"response":{"error": "1"}}';
}
else
{
echo '{"response":{"error": "0"}}';
}
MY FORM HTML *******************************
<body class="body">
<div id="logo"></div>
<div class="loginForm">
<form id="login" name="login" method="post" action="includes/login.php">
<input name="childs_name" type="text" id="childs_name" form="login" placeholder="Childs Name">
<input name="password" type="password" id="password" form="login" placeholder="Password">
<input name="submit" class="submit" type="button" id="submit" formaction=""value="Submit">
<input name="reset" type="reset" id="reset" form="login" value="Reset">
<div id ="add_err" class="add_err"></div>
</form>
</div>
<div class="l-a"></div>
<div class="tagLine">Little minds with big ideas</div>
</body><!--body-->
</html>
jQuery and JSON are new to me so I expect that my code is suspect and I'm missing something simple, I also hope I have given enough information for help to be given, and just in case there are those who think I have put too much code in then I just wanted to give as much info as I think would be needed
2 answers
solution1
3 ACCPTED 2015-03-20 14:32:13
First of all update your php file: 1. Uncomment
//include_once 'db_connect.php';
After this line add this one:
header('Content-Type: application/json'); //this one will tell the server to send a json object back to client (by default it sends text/html)Do not use echo 'something';. Instead get your result in a $result variable as this:
$result = array ( 'response' => array('status'=>'error', 'message' => 'password is missing')); //this is just an example for the missing password line
At the end of script use this:
echo json_encode($result);
exit();
PS Replace 'responce' in your php script with 'response'.
This is how your PHP file should look:
<?php
include_once 'db_connect.php';
//Start the session if is not started it
//You need it to store here the user's name when he successfully logs in
if (!isset(session_id())) {
session_start();
}
header("Content-Type: application/json"); //this will tell the browser to send a json object back to client not text/html (as default)
// This function will convert your variable (array) into a JSON object
function result($var){
echo json_encode($var);
exit();
}
if(!isset($_GET['submit'])) {
//check if childsname is empty
if(empty($_GET['childsname'])) {
$response = array('result'=>'fail', 'message' => 'missing childsname');
result($response);
}else{
//Always escape your variables before using them in a database
//I assumed $mysqli is your database connector
$childs_name = mysqli_real_escape_string($mysqli, $_GET['childsname']);
}
//check if password is empty
if(empty($_GET['password'])) {
$response = array('result'=>'fail', 'message' => 'missing password');
result($response);
}else{
//Always escape your variables before using them in a database
$password = mysqli_real_escape_string($mysqli, $_GET['password']);
}
// Query database
$query = "SELECT * FROM app WHERE `child_name` = '$childs_name'"; // You also need to add: AND `password_column_name` = '$password' LIMIT 1
$results = mysqli_query($mysqli, $query);
// Check if SQL query had erors
if (!$results){
$response = array('result'=>'fail', 'message' => 'sql error: ' . mysqli_error($mysqli));
result($response);
}
// If query was successfull and there are rows do this:
if (mysqli_num_rows($results)>0){
$_SESSION['username'] = $childs_name;
//You may use this variable to check if the user is logged in like this:
/*
if (isset($_SESSION['username'])) {
// user is logged in
// do something here
}
*/
$response = array('result'=>'success', 'message' => 'user is authenticated'));
result($response);
} else {
$response = array('result'=>'fail', 'message' => 'user authentication failed');
result($response);
}
?>
Replace in your JavaScript code the getJSON section with this one
$.getJSON("includes/login.php",{username:childsname,password:password},function(json) {
if(json.result === "success") {
$("#add_err").html( "Welcome "+childsname+"!");
//you should redirect to a php page, not a html one AND on that page you should have a session started ( session_start(); )
// and there you should check if :
/*
if (isset($_SESSION['username'])) {
// user is logged in
// do something here
} else {
//redirect the user back on this page(login_page)
}
*/
//wait two seconds before redirect, otherwise you say 'Welcome kiddo' for nothing because no one will ever see it :)
setTimeout(function(){
window.location= "menu.html";
},2000);
}else{
$("#add_err").html(json.message);
}
});
Later update to explain the $response array in php:
//$response here is an PHP array with the following structure
$response = array('result'=>'fail',
'message' => 'missing password');
When you call
result($response);
This array is converted in a JSON object with the following structure:
{
"response":"fail",
"message": "missing password"
}
Because the last instruction in result() function is exit(); the script execution ends and the result is passed back to the client, in your getJSON function.
solution2
1 2015-03-20 14:23:06
Not sure if it can be calssified as answer, but I'd like to give you some hints and comment might be too long.
1) Use post instead of get. It is pretty similiar and there are nice examples in docs: https://api.jquery.com/jquery.post/
Example: Post to the test.php page and get content which has been returned in json format ("John","time"=>"2pm")); ?>).
$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
console.log( data.name ); // John
console.log( data.time ); // 2pm
}, "json");
2) How to debug? If you cant check server response directly, you can put some file logging on php side to get what is going on there.
3) In your php code you echo 'respon c e' instead of 'response'
This may not be a direct solution to your problem, but I hope it will help a little.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.