phpStudy4——前端頁面使用Ajax請求並解析php返回的json數據

項目需求：

在html頁面顯示所有用戶列表信息。

需求分析：

1. html頁面使用ajax向后端php請求用戶數據

2. php腳本查詢數據庫，並將查詢后的結果以json格式返回前端html頁面

3. 前端html頁面接收到json數據之后，對json數據進行解析病輸出

示例代碼：

前端html頁面關鍵代碼：

$.post( 
    "../Controllers/userController.php",
    {
        "pageItems":pageItems,
        "indexStart":indexStart
    },
    function(userJson){
        if(userJson!=null){
            var obj=JSON.parse(userJson);
            $.each(obj, function(i) {
                var scoreLevel="";
                var userId=obj[i].userId;
                var userName=obj[i].userName;
                var phoneNumber=obj[i].phoneNumber;
                var userScore=obj[i].userScore;
                var dataTime=obj[i].dataTime;
                if(userScore<=120&&userScore>=100) scoreLevel="一等獎";
                if(userScore<100&&userScore>=60) scoreLevel="二等獎";
                if(userScore<60) scoreLevel="三等獎";
                $(".userTb").append("<tr><td>"+(i+1)+"</td><td>"+userName+"</td><td>"+phoneNumber+"</td><td>"+userScore+"</td><td>"+scoreLevel+"</td><td>"+dataTime+"</td></tr>");
            });
        }
    }
);

后端php關鍵代碼：

<?php
//連接數據庫

    //1. 聲明字符編碼
    header("Content-Type:text/html;charset=utf8"); 
    
    //2. 連接數據庫
    $link=mysql_connect("localhost","root","root");//連接數據庫
    if(!$link) echo "系統異常，請稍后再試";//如果連接數據庫失敗
    mysql_select_db("test", $link); //選擇數據庫
    mysql_query("set names 'utf8'");  // 解決中文亂碼
    
    //3. 查詢數據庫
    $strSql = "SELECT * FROM user_info"; //SQL查詢語句
    mysql_query("SET NAMES utf8");
    $result = mysql_query($strSql); //獲取數據集
    
    //4. 循環讀取數據並存入數組對象
    $users;$user;$i=0;
    while($row=mysql_fetch_array($result))
    {
        $user["userId"]=$row["userId"];
        $user["userName"]=$row["userName"];
        $user["phoneNumber"]=$row["phoneNumber"];
        $user["userScore"]=$row["userScore"];
        $user["dataTime"]=$row["dataTime"];
        $users[$i++]=$user;
    }
    //5. 以json格式返回html頁面
    echo urldecode(json_encode($users));
?>

 注意事項:

前端js腳本通過ajax請求后端php腳本返回的數組數據時，最好使用json格式傳回，如果你堅持想用數組傳入解析，估計會走不少彎路。