JSON数据格式

JSON（JavaScriptObject Notation）、轻量级数据交换格式、非常适合于服务器与 JavaScript 的交互。

JSON之所以流行，是因为可以把JSON数据结构解析为有用的javascript对象

ECMAScript5对解析JSON的行为进行了规范，定义了全局对象JSON

JSON对象有两个方法：stringify()和parse()。这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值

JSON的格式

{ "name":"huochai", "age":29, "school"}

<script type="text/javascript">     
    var jsonD={"name":"张三","age":"12"}
    console.log(jsonD.name);
    console.log(jsonD.age);
</script>

stringify()， 将JavaScript对象序列化为JSON字符串

<script type="text/javascript">
            var person=new Object();
            person.name="张三";
            person.age="12";
            console.log(person);
            var jsonObject=JSON.stringify(person);
            console.log(jsonObject);
</script>

JSON.parse方法用于将JSON字符串转化成对象

<script type="text/javascript">
            var person=new Object();
            person.name="张三";
            person.age="12";
            console.log(person);
            var jsonObject=JSON.stringify(person);
            console.log(jsonObject);
              
            console.log(JSON.parse(jsonObject));
</script>

Servlet中将实体对象转为JSON字符串

User user=new User("jack","j123");
String jsonUser=JSON.toJSONString(user);
System.out.println(jsonUser);

结果：{"password":"j123","userid":0,"username":"jack"}

Servlet中将List对象转为JSON字符串

创建一个保存集合的实体对象
public class JsonObject {
    private List<User> list;

    public List<User> getList() {
        return list;
    }

    public void setList(List<User> list) {
        this.list = list;
    }
}

        User user1=new User("jack","j123");
        User user2=new User("tom","t123");
        User user3=new User("smith","s123");
        
        List<User> list=new ArrayList();
        list.add(user1);
        list.add(user2);
        list.add(user3);

        JsonObject tjo = new JsonObject();
        tjo.setList(list);
        System.out.println(JSON.toJSONString(tjo));

ajax+artTemplate+servlet+fastjson的综合小实例

在实际开发中，我们会使用模板引擎来提高开发效率。而众多的模板引擎中，artTemplate无论就速度，兼容性还是使用人数上，都占绝对优势。这里我将简单地介绍下artTemplate的常见用法。

这其中涉及到的语法，我们只需要记住并且会用即可，不需要知道为什么这样用。
需要先使用一个type="text/html"的script标签存放模板

Serevlet
        User user1=new User("jack","j123");
        String jsonUser=JSON.toJSONString(user1);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter print = response.getWriter();
        print.println(JSON.toJSONString(jsonUser));
        print.close();

HTML
<div id="container"></div>
<script type="text/html" id="div">
       <h1>{{name}}</h1>
       <h2>{{age}}</h2>
</script>

Ajax
var jsonList=JSON.parse(xhr.responseText);//json字符串转成json对象
var html = template('test', jsonList);
document.getElementById(container').innerHTML = html; 

Serevlet
        User user1=new User("jack","j123");
        User user2=new User("tom","t123");
        User user3=new User("smith","s123");

        List<User> list=new ArrayList();
        list.add(user1);
        list.add(user2);
        list.add(user3);

        JsonObject tjo = new JsonObject();
        tjo.setList(list);

        String jsonList=JSON.toJSONString( tjo);
        response.setContentType("text/html;charset=utf-8");
        PrintWriter print = response.getWriter();
        print.println(JSON.toJSONString(tjo));
        print.close();

HTML 其中 list是服务端封装集合的实体对象属性名 必须一致
          value表示集合的元素对象
          i 表示下标
<div id="container"></div>
<script type="text/html" id="div">
    {{each list as value i}}
       <ol>
            <li>{{value.username}}</li>
            <li>{{value.password}}</li>
            <li>{{value.userid}}</li>
       </ol>
    {{/each}}
</script>

Ajax
var jsonList=JSON.parse(xhr.responseText);//json字符串转成json对象
var html = template('test', jsonList);
document.getElementById(container').innerHTML = html;