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

项目需求：

在html页面显示所有用户列表信息。

需求分析：

1. html页面使用ajax向后端php请求用户数据

2. php脚本查询数据库，并将查询后的结果以json格式返回前端html页面

3. 前端html页面接收到json数据之后，对json数据进行解析病输出

示例代码：

前端html页面关键代码：

 1 $.post( 
 2     "../Controllers/userController.php",
 3     {
 4         "pageItems":pageItems,
 5         "indexStart":indexStart
 6     },
 7     function(userJson){
 8         if(userJson!=null){
 9             var obj=JSON.parse(userJson);
10             $.each(obj, function(i) {
11                 var scoreLevel="";
12                 var userId=obj[i].userId;
13                 var userName=obj[i].userName;
14                 var phoneNumber=obj[i].phoneNumber;
15                 var userScore=obj[i].userScore;
16                 var dataTime=obj[i].dataTime;
17                 if(userScore<=120&&userScore>=100) scoreLevel="一等奖";
18                 if(userScore<100&&userScore>=60) scoreLevel="二等奖";
19                 if(userScore<60) scoreLevel="三等奖";
20                 $(".userTb").append("<tr><td>"+(i+1)+"</td><td>"+userName+"</td><td>"+phoneNumber+"</td><td>"+userScore+"</td><td>"+scoreLevel+"</td><td>"+dataTime+"</td></tr>");
21             });
22         }
23     }
24 );

后端php关键代码：

 1 <?php
 2 //连接数据库
 3 
 4     //1. 声明字符编码
 5     header("Content-Type:text/html;charset=utf8"); 
 6     
 7     //2. 连接数据库
 8     $link=mysql_connect("localhost","root","root");//连接数据库
 9     if(!$link) echo "系统异常，请稍后再试";//如果连接数据库失败
10     mysql_select_db("test", $link); //选择数据库
11     mysql_query("set names 'utf8'");  // 解决中文乱码
12     
13     //3. 查询数据库
14     $strSql = "SELECT * FROM user_info"; //SQL查询语句
15     mysql_query("SET NAMES utf8");
16     $result = mysql_query($strSql); //获取数据集
17     
18     //4. 循环读取数据并存入数组对象
19     $users;$user;$i=0;
20     while($row=mysql_fetch_array($result))
21     {
22         $user["userId"]=$row["userId"];
23         $user["userName"]=$row["userName"];
24         $user["phoneNumber"]=$row["phoneNumber"];
25         $user["userScore"]=$row["userScore"];
26         $user["dataTime"]=$row["dataTime"];
27         $users[$i++]=$user;
28     }
29     //5. 以json格式返回html页面
30     echo urldecode(json_encode($users));
31 ?>

 注意事项:

前端js脚本通过ajax请求后端php脚本返回的数组数据时，最好使用json格式传回，如果你坚持想用数组传入解析，估计会走不少弯路。

转载于:https://www.cnblogs.com/xyyt/p/5650191.html