Ajax/JSON请求php处理页面


Ajax/JSON request to php processing page

我正在为我的大学学位创建一个使用html5、ajax、JSON和php的手机应用程序。这个应用程序必须与mysql数据库通信,因此ajax Json被用来与php文件通信,然后php文件处理对数据库的查询。然后将使用phonegap云服务对其进行打包。

登录页面使用一个表单来获取用户名和密码,jQuery和JSON然后通过登录页面上的脚本将其传递给login.php。我可以让jQuery在一定程度上工作,但一旦我对php文件进行SQL查询,登录似乎就会挂起。我已经多次测试php进程,手动将输入变量放入php中,并在浏览器中运行页面,这很好。您可以在手机应用程序登录中看到登录信息。

我目前使用$.getJSON从输入表单发送变量,但我更喜欢使用post,但无法完全理解。同样不同的是,在使用表单操作后,我可以使用ech-outs来确保php正在完成它的工作,由于使用jquery/JSON,我找不到如何允许我使用类似的方式来检查我的php进程,任何指导都将不胜感激。

以下是我的脚本,我已经试着让它工作了3天了,但似乎无法让它工作,尽管我已经尝试了在许多论坛上找到的许多不同的脚本,任何帮助都将不胜感激

jquery/JSON脚本****************

$(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"}}';
}

我的表单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和JSON对我来说是新的,所以我希望我的代码是可疑的,我错过了一些简单的东西,我也希望我已经提供了足够的信息来提供帮助,以防有人认为我输入了太多代码,那么我只想提供我认为需要的信息。

首先更新您的php文件:1.未付款

//include_once 'db_connect.php';
  1. 在这一行之后加上这一行:

    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)
    
  2. 不要使用echo"something";。相反,在$result变量中获取结果,如下所示:

    $result = array ( 'response' => array('status'=>'error', 'message' => 'password is missing')); //this is just an example for the missing password line 
    

在脚本末尾使用以下内容:

echo json_encode($result);
exit();

第页。S.将php脚本中的response替换为response。

PHP文件应该是这样的:

<?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);
}
?>

用这个替换JavaScript代码中的getJSON部分

$.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);
    }
});

稍后更新以解释php:中的$response数组

//$response here is an PHP array with the following structure
$response = array('result'=>'fail', 
                  'message' => 'missing password');

当你呼叫时

结果($response);

此数组转换为具有以下结构的JSON对象:

{
     "response":"fail",
     "message": "missing password"
}

因为result()函数中的最后一条指令是exit()脚本执行结束,结果在getJSON函数中传递回客户端。

不确定它是否可以作为答案分类,但我想给你一些提示,评论可能太长了。

1) 使用post而不是get。它非常相似,文档中也有很好的例子:https://api.jquery.com/jquery.post/

示例:发布到test.php页面,获取以json格式返回的内容("John","time"=>"2pm");?>)。

$.post( "test.php", { func: "getNameAndTime" }, function( data ) {
console.log( data.name ); // John
console.log( data.time ); // 2pm
}, "json");

2) 如何调试?如果您不能直接检查服务器响应,您可以在php端放置一些文件日志来了解那里发生了什么。

3) 在您的php代码中,您会回显"response"而不是"response(响应)"

这可能不能直接解决你的问题,但我希望它能有所帮助。