Json是存储和交换文本信息的语法,类似xml。
json比xml更小、更快,更容易解析。
json语法
数据在键值对中,用逗号分隔,{}保存对象,[]保存数组。
json对象
{"name":"wangkai",age:18,sex:"男"}
访问json对象
var user = {"name":"wangkai",age:18,sex:"男"}; user.name
json数组
[{"name":"wangkai",age:18,sex:"男"},{"name":"wangkai",age:18,sex:"男"},{"name":"wangkai",age:18,sex:"男"}]
访问一个json数组中的对象。
var users = [{"name":"wangkai",age:18,sex:"男"},{"name":"wangkai",age:18,sex:"男"},{"name":"wangkai",age:18,sex:"男"}]; users[0].name 输出wangkai
删除json
delete users[0];
键必须是字符串,值可以是字符串,数字,对象,数组,null或者boolean值。
JSON.parse()
JSON通常用来于服务器交换数据,在接收数据时一般为字符串,我们可以使用JSON.parse()方法将字符串转换为对象。
可以调用第二个参数,对象的每个成员都会调用此函数。
var text = '{ "name":"Runoob", "initDate":"2013-12-14"}'; JSON.parse(text,function(key,value){ if(key=="initData"){ return new Date(value); }else{ return value; } })
JSON.stringify()
向服务器发送json数据时一般都是发送字符串,我们可以使用JSON.stringify()方法将对象转换为字符串。
var obj = { "name":"runoob", "alexa":10000}; var myJSON = JSON.stringify(obj);
解析服务器发送过来的字符串时还可以使用eval 来解析 eval和JSON.parse()相比 没有他那么严格。方法 alert 都能解析出来
var txt = '{ "sites" : [' + '{ "name":"google" , "url":"www.google.com" },' + '{ "name":"微博" , "url":"www.weibo.com" } ]}'; var obj = eval ("(" + txt + ")");
JSONP
解决跨域问题而存在,就是可以去别人的网站抓取信息。
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { });
JSON转对象插件
阿里巴巴的fastjson
引入包后 调用 JSON.toJSONString(users);
Servlet
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=utf-8"); request.setCharacterEncoding("UTF-8"); UserDao dao = new UserDao(); PrintWriter pt = response.getWriter(); try { List<User> users = dao.GetAllUser(); String str = JSON.toJSONString(users); pt.write(str); } catch (SQLException e) { e.printStackTrace(); } }
jsp页面
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script> $(function(){ $("#btnAjax").click(function(){ $.post("JsonTest",function(data){ var trs = ""; if(data != null && data.length > 0){ console.log(typeof(data)) for(var i = 0;i<data.length;i++){ var tr = "<tr><td>"+data[i].userId+"</td><td>"+data[i].userName+"</td><td>"+data[i].passWord+"</td><td>"+data[i].age+"</td><td>"+data[i].sex+"</td></tr>"; trs+=tr; } } $("#tb").html(trs); }) }) }) </script> <button id="btnAjax">ajax获取json列表</button> <table> <tr><th>用户ID</th> <th>用户名</th> <th>用户密码</th> <th>用户年龄</th> <th>用户性别</th> <tbody id="tb"> </tbody> </table>