phpStudy4——前端页面使用Ajax请求并解析php返回的json数据

时间：2021-11-25 05:14:28

项目需求：

在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格式传回，如果你坚持想用数组传入解析，估计会走不少弯路。

相关文章