一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2012-12-05 编辑:简简单单 来源:一聚教程网

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

方法一:函数构造定义法返回

 代码如下 复制代码

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

方法二:js中著名的eval函数

 代码如下 复制代码

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

第二种方法需要注意的是,对象表达式{'name':'json name'}必须用“()”扩住,否则

 代码如下 复制代码

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

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

JS跨域接收JSON数据

PHP脚本服务端

 代码如下 复制代码

if(isset($_GET['callback']) && !empty($_GET['callback'])) {
    echo $_GET['callback'] . '({"name":"踏雪残情", "profession":"phper"})';
}
?>

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

四、JS客户端

 代码如下 复制代码

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

五、JQuery应用

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

 代码如下 复制代码


接受后我们需要处理json数据

 代码如下 复制代码

 function showUserList()
         { 
             postXmlHttp("./UserListServlet.do","UserCallback(resultValue)","Loading()");
         }
        
         function UserCallback(jsonDate)
         {
             //json数据 序列化成js对象
    var jsObject = eval('('+jsonDate+')');
             var htmlStr = "

"+
               ""+
                   ""+
               "";
             for(var i=0;i              {
                 htmlStr+="
"+
                              ""+
                              ""+
                              ""+
                              ""+
                              ""+
                          "";
             }
             div.innerHTML=htmlStr+"
用户ID密码用户名位置操作
"+jsObject[i].userid+""+jsObject[i].pword+""+jsObject[i].username+""+jsObject[i].position+"编辑
";
         }
        
         function Loading()
         {
            //div.style="with:100%;text-align:center";
            div.innerHTML="正在获取数据请稍候... ...";
        
         }

热门栏目