Ajax返回JSON数据
发布时间：2020-12-15 21:56:48 所属栏目：百科 来源：网络整理
导读：* JSON数据格式： * 定义：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 * 特点： * 易于程序员阅读 * 易于计算机解析 * 浏览器原生就支持JSON数据格式 * 结构相对来讲，比较灵活 * 元素值可具有的类型：string,number,object,array,true
|
* JSON数据格式：
<script language="JavaScript">
/*
* 定义一个javabean
* Class Province{属性}
* province.name
*
* JSON数据格式：类似于Map集合，其实就是javascript对象
* * 是以"{}"开始和结束的
* * 数据存储是以"key/value"
* * 多个数据之间，用","隔开
*/
var person = {
name : "zs",age : 18,sex : "男"
}
alert(person.name);
</script>
<script language="JavaScript">
/*
* 定义一个javabean
* Class Province{属性}
* province.name
*
* JSON数据格式：类似于Map集合，其实就是javascript对象
* * 是以"{}"开始和结束的
* * 数据存储是以"key/value"
* * 多个数据之间，用","隔开
*/
var person = [
{
name : "zhangwuji",sex : "男"
},{
name : "zhouzhiruo",sex : "女"
}
]
alert(person[1].name);
</script>
<script language="JavaScript">
/*
* 定义一个javabean
* Class Province{属性}
* province.name
*
* JSON数据格式：类似于Map集合，其实就是javascript对象
* * 是以"{}"开始和结束的
* * 数据存储是以"key/value"
* * 多个数据之间，用","隔开
*/
var person = {
"yttlj":
[
{
name : "zhangwuji",sex : "男"
},{
name : "zhouzhiruo",sex : "女"
}
]
}
alert(person.yttlj[1].name);
</script>
<script language="JavaScript">
/*
* 定义一个javabean
* Class Province{属性}
* province.name
*
* JSON数据格式：类似于Map集合，其实就是javascript对象
* * 是以"{}"开始和结束的
* * 数据存储是以"key/value"
* * 多个数据之间，用","隔开
*/
var person = [
{
"yttlj":
[
{
name : "zhangwuji",sex : "男"
},{
name : "zhouzhiruo",sex : "女"
}
]
},{
"xajh":
[
{
name : "linghuchong",{
name : "dongfangbubai",sex : "女"
}
]
}
]
alert(person[1].xajh[1].name);
</script>
<script language="JavaScript">
/*
* 定义一个javabean
* Class Province{属性}
* province.name
*
* JSON数据格式：类似于Map集合，其实就是javascript对象
* * 是以"{}"开始和结束的
* * 数据存储是以"key/value"
* * 多个数据之间，用","隔开
*/
var person1 = {
"wuxia": [{
"yttlj": [{
name: "zhangwuji",age: 18,sex: "男"
},{
name: "zhouzhiruo",sex: "女"
}]
},{
"xajh": [{
name: "linghuchong",{
name: "dongfangbubai",sex: "女"
}]
}],"yanqing": [{
"hzgg": [{
name: "wuage",{
name: "xiaoyanzi",{
"qssymm": [{
name: "heshuhuan",{
name: "luyiping",sex: "女"
}]
}]
}
var person2 = {
name: "xxx",addrress: {
"home": "xxshixxqu","family": "yyshiyyqu"
}
}
var method = {
add: function(a,b){
return a + b;
}
}
alert(method.add(1,2));
// alert(person1.yanqing[0].hzgg[1].name);
</script>
案例public class JsonServlet extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
//手工构建一个String类型的json数据格式
String json = "[{'province':'吉林省'},{'province':'辽宁省'},{'province':'山东省'}]";
out.println(json);
}
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<select id="province" name="province">
<option value="">请选择....</option>
</select>
<select id="city" name="city">
<option value="">请选择.....</option>
</select>
</body>
<script language="JavaScript">
window.onload = function(){
var xhr = ajaxFunction();
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
var data = xhr.responseText;
/*
* eval()函数：将接收响应的数据格式，转换成json数据格式
*
* 向eval()函数，传递一对空的"{}"(空的json格式)
* * 利用"()"将其包装，eval()函数会强行将其转换成json数据格式
* * 不用"()"将其包装，eval()函数会将其解释为一个空的语句块
*/
var json = eval("("+data+")");
alert(json);
}
}
}
xhr.open("get","../jsonServlet?timeStamp="+new Date().getTime(),true);
xhr.send(null);
function ajaxFunction(){
var xmlHttp;
try{ // Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
}
</script>
</html>
总结 注意 eval()函数的用法（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |