JSON
JSON:JavaScript Object Notation(JavaScript对象表示法)
JSON是存储和交换信息的语法。类似XML。
JSON比XML更小、更快、更易解析。
{
"employees": [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName":"Jones" }
]
}
JSON简单示例
鉴于书籍数据有语言和版本信息，下面的例子展示了使用JSON存储书籍信息:
{ "book": [ { "id":"01", "language": "Java", "edition": "third", "author": "Herbert Schildt" }, { "id":"07", "language": "C++", "edition": "second" "author": "E.Balagurusamy" }] }
理解上述程序之后我们来看另外一个例子，让我们把下面的代码保存为json.html:
<html> <head> <title>JSON example</title> <script language="javascript" > var object1 = { "language" : "Java", "author" : "herbert schildt" }; document.write("<h1>JSON with JavaScript example</h1>"); document.write("<br>"); document.write("<h3>Language = " + object1.language+"</h3>"); document.write("<h3>Author = " + object1.author+"</h3>"); var object2 = { "language" : "C++", "author" : "E-Balagurusamy" }; document.write("<br>"); document.write("<h3>Language = " + object2.language+"</h3>"); document.write("<h3>Author = " + object2.author+"</h3>"); document.write("<hr />"); document.write(object2.language + " programming language can be studied " + "from book written by " + object2.author); document.write("<hr />"); </script> </head> <body> </body> </html>
JSON实例
<!DOCTYPE html> <html> <body> <h2>JSON Object Creation in JavaScript</h2> <p> Name: <span id="jname"></span><br /> Age: <span id="jage"></span><br /> Address: <span id="jstreet"></span><br /> Phone: <span id="jphone"></span><br /> </p> <script> var JSONObject= { "name":"John Johnson", "street":"Oslo West 555", "age":33, "phone":"555 1234567"}; document.getElementById("jname").innerHTML=JSONObject.name document.getElementById("jage").innerHTML=JSONObject.age document.getElementById("jstreet").innerHTML=JSONObject.street document.getElementById("jphone").innerHTML=JSONObject.phone </script> </body> </html>
1、eval()是JS原生函数，使用该形式:eval('('{name:"xiao",age:12}'+)');并不安全,无法保证类型转换为JS对象
2、json字符串-------》js对象
JSON.parse('{"name":"xiao","age":12}')
结果:Object{name:"xiao",age:12}
jQuery.parseJSON('{"name":"xiao","age":12}');
结果:Object{name:"xiao",age:12}
js对象-----》json字符串
JSON.stringify({name:"xiao",age:12})
在JavaScript中将JSON的字符串解析成JSON数据格式，一般有两种方式:
1.eval:使用Function对象来进行返回解析，使用eval函数来解析，jquery的each方法来
遍历
var data = " { root: [ {name:'1',value:'0'}, {name:'6101',value:'北京市'}, {name:'6102',value:'天津市'}, {name:'6103',value:'上海市'}, {name:'6104',value:'重庆市'}, ] }";
// 转换为json对象
var dataObj=eval("("+data+")");
第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQuery中的AJAX方法下的success等对于返回数据data的解析。
var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();
此时的data就是一个会解析成一个json对象了。
一个JavaScript函数把URL参数解析成Json对象
问题:请编写一个JavaScript函数parseQueryString,它的用途是把URL参数解析为一个对象。
eg:var obj = parseQueryString(url);
创建对象的三种方式:
var Person = new Object(); Person.name = "Sun"; Person.age = 24;
var Person=new Object(); Person["name"]="Sun"; Person["age"]=24;
var Person={ name: "Sun", age: 24 }
答案：
function parseQueryString(url) { var obj = {}; var keyvalue = []; var key = "", value = ""; var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&"); for (var i in paraString) { keyvalue = paraString[i].split("="); key = keyvalue[0]; value = keyvalue[1]; obj[key] = value; } return obj; }
示例一:
//把url的参数部分转换成json对象
parseQueryString: function(url) { var reg_url = /^[^/?]+/ ? ([/w/W] + ) $ / , reg_para = /([^&=]+)=([/w/W]*?)(&|$|#)/g, arr_url = reg_url.exec(url), ret = {}; if (arr_url && arr_url[1]) { var str_para = arr_url[1], result; while ((result = reg_para.exec(str_para)) != null) { ret[result[1]] = result[2]; } } return ret; }
//通过key获取url中的参数值
getQueryString: function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }
示例二：
js通过两种方法获取url传递参数：
js获取url传递参数方法一：
这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案，相当于asp的request.querystring，PHP的$_GET
函数:
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); } } return theRequest; }
然后我们通过调用此函数获取对应参数值：
var Request = new Object(); Request = GetRequest(); var 参数1,参数2,参数3,参数N; 参数1 = Request[''参数1'']; 参数2 = Request[''参数2'']; 参数3 = Request[''参数3'']; 参数N = Request[''参数N''];
以此获取url串中所带的同名参数
js获取url传递参数方法二 正则分析法：
function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return (r[2]); return null; } alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); alert(GetQueryString("参数名3"));
JSON元素的添加删除
javascript删除数组的3种方法
1,用shift()方法
shift:删除原数组的第一项，并返回删除元素的值;如果数组为空则返回undefined
var chaomao = [1,2,3,4,5]
var chaomao.shift() //得到1
alert(chaomao); //[2,3,4,5]
2,用pop()方法
pop:删除原数组最后一项，并返回删除元素的值，如果数组为空则返回Undefined
var chaomao = [1,2,3,4,5]
var chaomao.pop(); //得到5
alert(chaomao); //[1,2,3,4]
3,用splice()方法
这个方法很强大，可以对数组任意项进行增加，删除，替换操作
修改操作：
var chaomao = [1,2,3,4,5]
chaomao.splice(2,1,8,9);
alert(chaomao) //1,2,8,9,4,5
第一个参数是准备操作的数组位置，第二个参数是操作位置后面的数组项数，第三个以后的就是，被替换后的内容
例子就是表示：从chaomao这个数组位置2开始（也就是值为3的那一项，数组下标从0开始的），位置2后的一项，替换成成8，9
如果把第二个参数改为2，也就是chaomao.splice(2,2,8,9)，也就是说位置2后面的两项换成8，9，打印出来的结果就是1,2,8,9,5，3和4这2两项被换掉了
这里需要说明的是，被替换的项数不一定要和替换的项数相等，1项可以被换成3项，5项也可以被换成2项，基于这个原理，我们就用这个方法来对数组进行添加和删除操作
删除操作:
var chaomap = [1,2,3,4,5]
chaomap.splice(2,1);
alert(chaomap); //1,2,4,5
上面例子中，把chaomao中的位置2后的1项替换成空的，因为后面没有内容，结果可以看到，把3这项删除了
添加操作：
var chaomao=[1,2,3,4,5]
chaomao.splice(2,0,8,9)
alert(chaomao)//1,2,8,9,3,4,5
上面例子中，把chaomao中位置2后的0项换成8,9，也就等于添加了两项
其实，删除和添加操作都只是splice修改方法的两种衍生罢了
javasscript删除对象的方法
js中删除对象元素用delete操作符
我们来看看一个例子
var p ={ "name": “chaomao”, "age":45, "sex":"male" }; delete p.name for(var i in p){ console.log(i);//输出age,sex，name项已经被删除了 }
javascript里面的数组，json对象，动态添加，修改，删除示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript里面的数组，json对象，动态添加，修改，删除示例</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var a = JSON.parse("{\"title\":\"\",\"data\":[]}");
var b = JSON.parse("{\"id\":\"2\"}");
var c = JSON.parse("{\"id\":\"3\"}");
var d = JSON.parse("{\"id\":\"4\"}");
var e = JSON.parse("{\"id\":\"5\"}");
var f = JSON.parse("{\"id\":\"6\"}");
function myObjectPush() {
debugger;
/* javascript里面的数组，json对象，动态添加，修改，
删除示例 只要适合Javascript的方法都是可以用在JSON对象的数组中的！
所以还有另外的方法splice( )进行crud操作！
*/
//增加属性
$(a).attr("id", "1");
//增加子对象
a.data.push(b); //数组最后加一条记录
a.data.push(c);
a.data.push(d);
a.data.unshift(d); //数组最前面加一条记录
//修改子对象及属性
a.title = "这是json名字";
//删除子对象
//json的删除有很多种，直接用过 delete json对象方式:
delete a.data[1];
a.data.pop(); //删除最后一项
a.data.shift(); //删除第一项
a.data.splice(0, 1); //删除指定子对象，参数：开始位置,删除个数
//替换不删除
a.data.splice(1, 0, e, f); //开始位置,删除个数,插入对象
//替换并删除 a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象
}
</script>
</head>
<body onload="myObjectPush()"></body>
</html>
解析JSON数据的三种方法:
eval()方法:解析JSON数据的最常用方法是使用javascript的eval()方法
function toJson(str){ var json = eval('(' + str + ')'); return json; }
new Function方法
function toJson(str){ var json = (new Function("return " + str))(); return json; }
JSON.parse()方法
这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本,这些浏览器都已经接近W3C标准，默认实现了toJSON方法。
function toJson(str){ return JSON.parse(str); }
