ajax和json

一、json的格式

1、var temp = {"aa":1, "bb":2, "cc":3};　　// 带变量的json

2、{"aa":1, "bb":2, "cc":3};　　　　// 不带变量的json

3、var temp = [{"aa":1, "bb":2, "cc":3},{"aa":1, "bb":2, "cc":3},{"aa":1, "bb":2, "cc":3}];　　// 数组json

4、var temp = {"ab":{"platform_id":"qqq","platform_name":"sss"}, "cd":{"platform_id":"eee","platform_name":"fff"}}

 

二、读取json

注：

1、如果是带变量名的json

var temp = {"aa":1, "bb":2, "cc":3};　　// 带变量的json

ajax("sss.json", function(data){

　　// 将字符串转成对象，但json有变量名，转成对象就不用在给对象起名

　　eval(data);

　　for(var key in temp){　　// temp为json内的变量名也是就是data对象的名

　　　　alert(key)　　// 输出aa, bb, cc

　　　　alert(temp[key]);　　// 输入 1，2，3

　　}

});

 

2、如果json里没有声名变量

{"aa":1, "bb":2, "cc":3};

ajax("http://www.renren.com/data/json/data2.json", function(data){
    // json没有变量
    eval("var temp =" + data);    // 将字符串变成对象时赋个对象名
    for(var key in temp){
        alert(key);     // 返回 a b c
    }

    for(var key in temp){
        alert(temp[key]);   // 返回 12 34 56
    }
}

 

3、访问数组json

ajax("http://www.renren.com/data/json/data3.json", function(data){
	var str = "";
	// 读数据的json
	eval("var temp = " + data);
	
	for(var key in temp){
		for(var k1 in temp[key]){
			alert(k1);	// 每组json中的key	返回 platform_id platform_name platform_id platform_name platform_id platform_name
		}
	}
	
	for(var key in temp){
		str += temp[key].platform_id + "<br />";	// 获取数据指定key中的数据	
	}
	
	getID("da").innerHTML = str;

}, function(){
	alert("创建失败");
});

 

 4、获取json中的数组长度

var temp = {a:12, b:34, c:56};
ajax("http://www.renren.com/data/json/data1.json", function(data){
	var str = "";
	var s = getLen(data);
	alert(s);		// 返回3

}, function(){
	alert("创建失败");
});

function getLen(str){
	eval(str);
	var jsonLength=0;
	for(var key in temp){
		jsonLength++;
	}
	return jsonLength;
}

 

 

 示例：

function ajax(url, fnSucc, fnFaild){
	//1.创建Ajax对象
	var oAjax=null;		
	if(window.XMLHttpRequest){
		oAjax=new XMLHttpRequest();
	}
	else{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP");
	}
	oAjax.open('GET', url, true);
	oAjax.send();

	oAjax.onreadystatechange=function (){
		if(oAjax.readyState==4){			
			if(oAjax.status==200){				
				fnSucc(oAjax.responseText);
			}
			else{				
				if(fnFaild){
					fnFaild(oAjax.status);
				}
			}
		}
	};
};

function getID(id){
	return document.getElementById(id);	
}

ajax("sss.json", function(str){
	var newTd = "";
	var newTh;
	var byId = getID("dataTab");
			
	eval(str);	// 将回调数据转成对
	// 表内容
	for(var key in temp){
		newTd += "<tr><td>" + key + "</td><td>" + temp[key]['platform_id'] + "</td><td>" + temp[key]['platform_name'] + "</td></tr>";
	}
	byId.innerHTML = newTd;
	
}, function(){
	alert("创建失败");
});

 

二、jquery中获取json和jsonp

1、无变量名json

{"aa":1, "bb":2, "cc":3}　　// rrdata.json

$.ajax({
    url:"rrdata.json",
    type: "get",
    dataType:"json",        // 如果没有数据类型json中要写变量
    success: function(data){　　// 返回的是object，而不是字符串所以不用eval data
        for(var i in data){
            alert(data[i]['platform_id']);    
        }
    }
});

 

2、有变量名的json

var data = {"aa":1, "bb":2, "cc":3}

$.ajax({
    url:"http://www.renren.com/data/rrdata.json",
    type: "get",
    // dataType:"json",        // 如果有变量名就可以不用写请求的数据类型
    success: function(data){
        alert(data);
        eval(data);
        for(var i in temp){
            alert(temp[i]['platform_id']);    
        }
    }
});

 

3、跨域请求jsonp

// 注意请求的json文件是不是以函数参数来加载json, gets('{"aa":1, "bb":2, "cc":3}');
function gets(data){
	alert("aa");
	alert(data);
}
$(function(){	
	$.ajax({
		url:"http://interface.game.renren.com/ActivityCenter/?method=UserInfo.getReward2&catalog=plugins&gameid=lstx&aname=kuanian&aid=1026&uid=%22+getCookie%28%22id%22%29+%22&type=%22+type",
		type: "post",
        jsonpCallback:"gets",
		dataType:"jsonp",
		success: function(data){
			eval(data);
		}
	});
});