夏日博客

A-A+

javascript中JSON数据接受，处理介绍

2016年01月28日 前端设计 暂无评论 阅读 7 views 次

本文章介绍一从json数据生成到利用js来接受json数据并且处理json数据进行输出，有需要的朋友可参考参考。

js读取JSON的方法我接触到的有两种.

方法一:函数构造定义法返回,代码如下:

  1. var strJSON = "{name:'json name'}";//得到的JSON  
  2. var obj = new Function("return" + strJSON)();//转换后的JSON对象  
  3. alert(obj.name);//json name  

方法二:js中著名的eval函数,代码如下:

  1. var strJSON = "{name:'json name'}";//得到的JSON  
  2. var obj = eval( "(" + strJSON + ")" );//转换后的JSON对象  
  3. alert(obj.name);//json name  

第二种方法需要注意的是.对象表达式{'name':'json name'}必须用“（）”扩住.否则代码如下:

  1. var strJSON = "{name:'json name'}";  
  2. var obj = eval(strJSON);  
  3. alert(obj.constructor);//String 构造函数  
  4. alert(obj.name);//undefine  

必须把对象表达式扩起来eval执行才能生成一个匿名对象!

JS跨域接收JSON数据

PHP脚本服务端,代码如下:

  1. <?php  
  2. if(isset($_GET['callback']) && !emptyempty($_GET['callback'])) {  
  3.     echo $_GET['callback'] . '({"name":"踏雪残情", "profession":"phper"})';  
  4. }  
  5. ?>  

$_GET['callback']即是在客户端要调用的JS函数名，{"name":"踏雪残情", "profession":"phper"}即服务端返回的JSON数据。

四、JS客户端,代码如下:

  1. <script type="text/javascript">  
  2. function func(data) {  
  3.     alert('姓名:' + data.name + ', 职业:' + data.profession);  
  4. }  
  5. </script>  
  6. <script type="text/javascript" src="/technology/jsonp/server.php?callback=func"></script>  

你可以在本地执行,结果将弹出“姓名:踏雪残情,职业:phper”.

五、JQuery应用

JQuery的getJSON函数已集成了跨域访问的功能，需在url的地址上跟上一个参数，参数值用?占位符替代，如下所示，执行时JQuery会把占位符自动替换为时间戳的函数名,代码如下:

  1. <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript">  
  3. $.getJSON('/technology/jsonp/server.php?callback=?', function(data) {  
  4.     alert('姓名:' + data.name + ', 职业:' + data.profession);  
  5. });  
  6. </script>  

接受后我们需要处理json数据,代码如下:

  1. function showUserList()  
  2.         {    
  3.             postXmlHttp("./UserListServlet.do","UserCallback(resultValue)","Loading()");  
  4.         }  
  5.           
  6.         function UserCallback(jsonDate)  
  7.         {  
  8.             //json数据 序列化成js对象  
  9.    var jsObject = eval('('+jsonDate+')');  
  10.             var htmlStr = "<table align=center width=60%>"+  
  11.               "<tr>"+  
  12.                   "<th>用户ID</th><td>密码</td><td>用户名</td><td>位置</td><td>操作</td>"+  
  13.               "</tr>";  
  14.             for(var i=0;i<jsObject.length;i++)  
  15.             {  
  16.                 htmlStr+="<tr id='tr"+i+"'>"+  
  17.                              "<td>"+jsObject[i].userid+"</td>"+  
  18.                              "<td>"+jsObject[i].pword+"</td>"+  
  19.                              "<td>"+jsObject[i].username+"</td>"+  
  20.                              "<td>"+jsObject[i].position+"</td>"+  
  21.                              "<td><a herf='#' onclick="editUser(tr"+i+");">编辑</a></td>"+  
  22.                          "</tr>";  
  23.             }  
  24.             div.innerHTML=htmlStr+"</table>";  
  25.         }  
  26.           
  27.         function Loading()  
  28.         {  
  29.            //div.style="with:100%;text-align:center";  
  30.            div.innerHTML="<font color=red>正在获取数据请稍候... ...</font>";  
  31.           
  32.         }  
标签：

给我留言