对 php 处理页面的 Ajax/JSON 请求答案

【问题标题】：Ajax/JSON request to php processing page对 php 处理页面的 Ajax/JSON 请求
【发布时间】：2015-03-20 14:01:25
【问题描述】：

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

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

我目前正在使用 $.getJSON 从输入表单发送变量，但更喜欢使用帖子，但无法完全弄清楚。也不同于使用表单操作帖子，然后我可以使用回显来确保 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 对我来说是新的，所以我希望我的代码是可疑的，我遗漏了一些简单的东西，我也希望我已经提供了足够的信息来提供帮助，以防万一有人认为我放了太多代码然后我只想提供我认为需要的尽可能多的信息

【问题讨论】：

也许您不应该将include_once 'db_connect.php'; 注释掉？
Dallin >我这样做是为了测试一些东西，但忘了取消注释，请指出，现在可能是代码失明的情况，lol

标签： javascript php jquery ajax json

【解决方案1】：

首先更新你的 php 文件： 1.取消注释

//include_once 'db_connect.php';

在这一行之后添加这一行：

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)

不要使用 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();

附：将 php 脚本中的 'responce' 替换为 '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 函数中传递回客户端。

【讨论】：

您好，谢谢您的意见，我不确定我是否完全理解某些 cmets，即使它让我听起来很厚重。你提到的第二条评论（$result）是在查询后的 php 文件中吗？ echo json 是在 php 还是 jquery 脚本中？
@user3370876 我更新了我的答案，向你展示你应该做什么。请花点时间阅读 cmets。如果您有不明白的地方，请在此处提问。
非常感谢，我一定会的，我需要仔细阅读这篇文章，这样我才能理解逻辑和过程，但是一旦我确信我理解了这一切并且它有效，我会接受答案，希望没问题
在你的json中你评论说我应该重定向到一个php页面，我同意，但在这种情况下，因为它是一个手机应用程序，并且使用phonegap打包和编译，我不能在页面中使用php页面结构，它只接受 html、javascript 和 css
有几个小的 tweeks，由您的 cmets 在它工作的脚本中提示。不太确定我完全理解脚本的 $response = array 部分的逻辑，但我会继续查看它以了解它，添加超时是我的想法，但谢谢你添加它

【解决方案2】：

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

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 代码中，您回显 'responce' 而不是 'response'

这可能无法直接解决您的问题，但希望对您有所帮助。

【讨论】：