用JQuery做前端页面与后台程序交互时，JSON起的作用太大了，记录JQuery与之相关的一些东西.
与JSON处理相关的几个函数:
1.将字符串转换为JSON对象
a.JavaScript通过eval来转换，但这种方式不安全,不推荐使用。
var jsonObj=eval(jsonStr);
b.JSON.parse方式,但ie6,ie7不支持，需另外去http://www.json.org/js.html下载一个js扩展才可以。
var jsonObj=JSON.parse(jsonStr);
c.JQuery通过parseJSON函数，更安全
var jsonObj=JQuery.parseJSON(jsonStr);
2.将JSON对象转为字符串
var jsonStr = JSON.stringify(jsonObj);
3. getJSON()，这个函数通过get请求得到json数据
jQuery.getJSON( url, data, callback )
·url用于提供json数据的地址页
data(Optional)用于传送到服务器的键值对
·callback(Optional)回调函数，json数据请求成功后的处理函数
具体参考:
http://www.w3school.com.cn/jquery/ajax_getjson.asp
4..GET,.POST都可以直接传送或接收JSON字符串。
....
JSON展示:
例1.
[{ "ret": "c: /tmp/11gR2", "type": "DIR"},{ "ret": "c: /tmp/xcl.log", "type": "FILE"},{ "ret": "c: /tmp/soft", "type": "DIR"}]
图形化展开后的视图:
{"name":"xcl.log","type":"FILE","fileversion":[
{"version":1,"backupTime":100,"createtime":80,"modifytime":70,"size":"10m"},
{"version":2,"backupTime":120,"createtime":50,"modifytime":80,"size":"50m"}]}
展示JSON使用的一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JSON DEMO</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<SCRIPT type="text/javascript">
$(document).ready(function(){
function demo1()
{
//字符串
var jsonStr = '[{ "ret": "c: /tmp/11gR2", "type": "DIR"},{ "ret": "c: /tmp/xcl.log", "type": "FILE"},{ "ret": "c: /tmp/soft", "type": "DIR"}]';
//将字符串转换为JSON对象
//JavaScript通过eval来转换，但这种方式不安全,不推荐使用。
// var jsonObj=eval(jsonStr);
//JSON.parse方式,但ie6,ie7不支持，需另外去http://www.json.org/js.html下载一个js扩展才可以。
var jsonObj=JSON.parse(jsonStr);
//JQuery通过parseJSON函数，更安全
var jsonObj=jQuery.parseJSON(jsonStr);
//使用each进行遍历JSON数组
var info = "length="+jsonObj.length;
$.each(jsonObj, function (n, value) {
info += "<br/>"+value.type + ' : ' + value.ret
});
$('#JsonInfo_div').html(info);
}
function demo2()
{
//直接将一个复杂的JSON赋给JS变量
var jsonObj ={"name":"xcl.log","type":"FILE","fileversion":[
{"version":1,"backupTime":100,"createtime":80,"modifytime":70,"size":"10m"},
{"version":2,"backupTime":120,"createtime":50,"modifytime":80,"size":"50m"}]}
var info = "name="+jsonObj.name;
info += "<br/>"+"length="+jsonObj.fileversion.length;
$.each(jsonObj.fileversion, function (n, value) {
info += "<br/> version:"+jsonObj.fileversion[n].version + ' : size:' + jsonObj.fileversion[n].size;
});
$('#JsonInfo2_div').html(info);
$('#JsonDemo21_div').html(JSON.stringify(jsonObj));
}
demo1();
demo2();
});
</SCRIPT>
</head>
<body>
<h2> JSON DEMO</h2>
<br/>
demo1:<br/>
<P id="JsonInfo_div" style='color:red;padding-left:65px;'></P>
<br/>
demo2:<br/>
<P id="JsonDemo21_div" style='color:blue;padding-left:65px;'></P>
<br/>
<P id="JsonInfo2_div" style='color:blue;padding-left:65px;'></P>
<br/>
</body>
</html>效果:
评论回复