本文章介绍一从json数据生成到利用js来接受json数据并且处理json数据进行输出，有需要的朋友可参考参考。
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脚本服务端
| 代码如下 |
|
|
<?php
if(isset($_GET['callback']) && !empty($_GET['callback'])) {
echo $_GET['callback'] . '({"name":"踏雪残情", "profession":"phper"})';
}
?>
|
$_GET['callback']即是在客户端要调用的JS函数名，{"name":"踏雪残情", "profession":"phper"}即服务端返回的JSON数据。
四、JS客户端
| 代码如下 |
|
|
<script type="text/javascript">
function func(data) {
alert('姓名:' + data.name + ', 职业:' + data.profession);
}
</script>
<script type="text/javascript" src="/technology/jsonp/server.php?callback=func"></script>
|
你可以在本地执行，结果将弹出“姓名:踏雪残情, 职业:phper”。
五、JQuery应用
JQuery的getJSON函数已集成了跨域访问的功能，需在url的地址上跟上一个参数，参数值用?占位符替代，如下所示，执行时JQuery会把占位符自动替换为时间戳的函数名。
| 代码如下 |
|
|
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$.getJSON('/technology/jsonp/server.php?callback=?', function(data) {
alert('姓名:' + data.name + ', 职业:' + data.profession);
});
</script>
|
接受后我们需要处理json数据
| 代码如下 |
|
|
function showUserList()
{
postXmlHttp("./UserListServlet.do","UserCallback(resultValue)","Loading()");
}
function UserCallback(jsonDate)
{
//json数据 序列化成js对象
var jsObject = eval('('+jsonDate+')');
var htmlStr = "<table align=center width=60%>"+
"<tr>"+
"<th>用户ID</th><td>密码</td><td>用户名</td><td>位置</td><td>操作</td>"+
"</tr>";
for(var i=0;i<jsObject.length;i++)
{
htmlStr+="<tr id='tr"+i+"'>"+
"<td>"+jsObject[i].userid+"</td>"+
"<td>"+jsObject[i].pword+"</td>"+
"<td>"+jsObject[i].username+"</td>"+
"<td>"+jsObject[i].position+"</td>"+
"<td><a herf='#' onclick="editUser(tr"+i+");">编辑</a></td>"+
"</tr>";
}
div.innerHTML=htmlStr+"</table>";
}
function Loading()
{
//div.style="with:100%;text-align:center";
div.innerHTML="<font color=red>正在获取数据请稍候... ...</font>";
}
|
