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

  • 相关阅读:
    [技巧] 使用Word2010直接编辑、发布博客→博客园cnblogs
    POJ 1201 Intervals【差分约束】
    HDU 2896 病毒侵袭【AC自动机】
    opengl中的gluOrtho2D【转】
    【转】x86和x64的含义和区别
    POJ 1704 Georgia and Bob【Nim博弈】
    POJ 1947 Rebuilding Roads【树状DP】
    POJ 3207/ POJ 3678 【2SAT】
    POJ 1067 取石子游戏【威佐夫博奕】
    apache+webdav的安装配置
  • 原文地址:https://www.cnblogs.com/xyyt/p/5650191.html
Copyright © 2020-2023  润新知