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