JSON

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

http://mvnrepository.com/artifact/com.alibaba/fastjson/1.2.47

引入包后 调用 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>