欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Ajax使用JSON数据格式案例

程序员文章站 2022-06-21 08:46:21
1： json（javascriptobject notation）一种简单的数据格式，比xml更轻巧。json是javascript原生格式，这意味着在javascri...

1：

json（javascriptobject notation）一种简单的数据格式，比xml更轻巧。json是javascript原生格式，这意味着在javascript中处理json数据不需要任何特殊的api或工具包。
json的规则很简单：对象是一个无序的“‘名称/值'对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值'对”之间使用“,”（逗号）分隔。
json用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。

<span style="font-size:18px;">{"person": { 
"name":"andy budd", 
"website":"http://andybudd.com/", 
"email":"andy@clearleft.com" 
} 
}</span>

json 只是一种文本字符串。它被存储在responsetext 属性中
为了读取存储在 responsetext 属性中的json 数据，需要根据javascript 的eval语句。函数 eval会把一个字符串当作它的参数。然后这个字符串会被当作 javascript 代码来执行。因为 json 的字符串就是由 javascript 代码构成的，所以它本身是可执行的

2：案例

<%@ page language="java" pageencoding="utf-8"%> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>people at clearleft</title> 
<style type="text/css"> 
@import url("clearleft.css"); 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
var anodes=document.getelementsbytagname("a"); 

for(var i = 0;i < anodes.length; i++){ 

anodes[i].onclick=function(){ 
var request=new xmlhttprequest(); 
var url=this.href; 
var method="get"; 
request.open(method,url); 
request.send(null); 
request.onreadystatechange=function(){ 
if(request.readystate==4){ 
if(request.status==200||request==304){ 
var result=request.responsetext; //json被存储在responsetext属性中 
var object=eval("("+result+")"); //读取responsetext中的json数据 
var name= object.person.name; //读取json对象中存储的数据 
var website= object.person.website; 
var email= object.person.email; 
var anode=document.createelement("a"); 
anode.appendchild(document.createtextnode(name+":"+"email"+":"+website)); 
anode.href="mailto"+"email"+",website"; 
var h2node=document.createelement("h2"); 
h2node.appendchild(anode); 
var dtails=document.getelementbyid("details"); 
details.innerhtml=""; //防止重复的添加字符串 
dtails.appendchild(h2node); 
} 
} 
} 
return false; 
} 
} 
}; 
</script> 
</head> 
<body> 
<h1> 
people 
</h1> 
<ul> 
<li> 
<a href="files/andy.js">andy</a> 
</li> 
<li> 
<a href="files/richard.js">richard</a> 
</li> 
<li> 
<a href="files/jeremy.js">jeremy</a> 
</li> 
</ul> 
<div id="details"></div> 
</body> 
</html>

上一篇： Unity自定义编辑器界面（Inspector界面）

下一篇： Unity实现注册登录模块

推荐阅读