本文章由成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)整理提供，主要介紹了從json數(shù)據(jù)生成到利用js來接受json數(shù)據(jù)并且處理json數(shù)據(jù)進(jìn)行輸出，有需要的朋友可參考參考。
js讀取JSON的方法我接觸到的有兩種：
方法一：函數(shù)構(gòu)造定義法返回
| 代碼如下 |
var strJSON = "{name:'json name'}";//得到的JSON
var obj = new Function("return" + strJSON)();//轉(zhuǎn)換后的JSON對(duì)象
alert(obj.name);//json name |
方法二：js中著名的eval函數(shù)
| 代碼如下 |
var strJSON = "{name:'json name'}";//得到的JSON
var obj = eval( "(" + strJSON + ")" );//轉(zhuǎn)換后的JSON對(duì)象
alert(obj.name);//json name |
第二種方法需要注意的是，對(duì)象表達(dá)式{'name':'json name'}必須用“（）”擴(kuò)住，否則
| 代碼如下 |
var strJSON = "{name:'json name'}";
var obj = eval(strJSON);
alert(obj.constructor);//String 構(gòu)造函數(shù)
alert(obj.name);//undefine |
必須把對(duì)象表達(dá)式擴(kuò)起來eval執(zhí)行才能生成一個(gè)匿名對(duì)象!
JS跨域接收J(rèn)SON數(shù)據(jù)
PHP腳本服務(wù)端
| 代碼如下 |
<?php
if(isset($_GET['callback']) && !empty($_GET['callback'])) {
echo $_GET['callback'] . '({"name":"踏雪殘情", "profession":"phper"})';
}
?> |
$_GET['callback']即是在客戶端要調(diào)用的JS函數(shù)名，{"name":"踏雪殘情", "profession":"phper"}即服務(wù)端返回的JSON數(shù)據(jù)。
JS客戶端
| 代碼如下 |
<script type="text/javascript">
function func(data) {
alert('姓名:' + data.name + ', 職業(yè):' + data.profession);
}
</script>
<script type="text/javascript" src="/technology/jsonp/server.php?callback=func"></script> |
你可以在本地執(zhí)行，結(jié)果將彈出“姓名:踏雪殘情, 職業(yè):phper”。
JQuery應(yīng)用
JQuery的getJSON函數(shù)已集成了跨域訪問的功能，需在url的地址上跟上一個(gè)參數(shù)，參數(shù)值用?占位符替代，如下所示，執(zhí)行時(shí)JQuery會(huì)把占位符自動(dòng)替換為時(shí)間戳的函數(shù)名。
| 代碼如下 |
<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 + ', 職業(yè):' + data.profession);
});
</script> |
接受后我們需要處理json數(shù)據(jù)
| 代碼如下 |
function showUserList()
{
postXmlHttp("./UserListServlet.do","UserCallback(resultValue)","Loading()");
}
function UserCallback(jsonDate)
{
//json數(shù)據(jù) 序列化成js對(duì)象
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>正在獲取數(shù)據(jù)請(qǐng)稍候... ...</font>";
} |
