Ajax处理Json数据演示

Ajax处理Json数据演示

先演示一个最原始的方式拿数据：

在JSP页面请求Servlet，然后封装一个属性去前端，在前端用EL表达式拿出来：
向后台发送请求：

后台封装数据：

前端页面用EL表达式拿数据：

先写一个过度版本：

<input type="button" value="前端解析Json技术" onclick="demo();">
    <script type="text/javascript">
        function demo() {
            //Json
            /*后台返回一个封装成 符合Json格式的字符串  
                json格式  : [{id:"U001",name:"Jack",age:"20"},{},{}];
                eval(string)函数:计算某个字符串，校验是否符合规则，然后执行;
             */
            var res = '[{id:"U001",name:"Jack",age:"20"},{id:"U002",name:"张三",age:"30"}]';
            var jsonUser = eval(res);//转换成json
            alert(jsonUser[0].id);
        }
    </script>

这样就可以拿到了：

手动封装Json

JS代码

function ask2() {
        //Ajax对象xhr
        var xhr = null;
        if (window.XMLHttpRequest) {//高版本IE
            xhr = new XMLHttpRequest();
        } else {//低版本
            xhr = new ActiveXObjct("Microsoft.XMLHttp");
        }
        var url = " <c:url value='/JsonServlet1' />";
        xhr.open("POST", url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {//返回
                if (xhr.status == 200) {//正常响应
                //txt符合json格式
                    var txt = xhr.responseText;
                    //alert(txt);
                    解析JSON格式
                    var users =eval(txt);//把txt字符串校验并转换成json对象
                    for(var i=0;i<users.length;i++){
                        alert(users[i].id+","+users[i].name+","+users[i].age);
                    }
                }
            }

        };
        xhr.send(null);
    }

Servlet代码

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        List<User> users = new ArrayList<User>();
        users.add(new User("U001","Jack",20));
        users.add(new User("U002","张三",30));
        //json格式 : [{id:"U001",name:"Jack",age:"20"},{},{}];
        String json = "";
        for(User user:users){
            //判断是不是第一个
            if(json.equals("")){
                json="{id:\""+user.getId()+  "\",name:\"" + user.getName()+
                        "\",age:\""+user.getAge()+"\"}";
            }else{
                json=json+",{id:\""+user.getId()+  "\",name:\"" + user.getName()+
                        "\",age:\""+user.getAge()+"\"}";
            }
        }
        json="["+json+"]";
        response.getWriter().print(json);
    }

利用Apache工具封装Json：

一堆工具类：

JS代码一样：
Servlet：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        List<User> users = new ArrayList<User>();
        users.add(new User("U001","Jack",20));
        users.add(new User("U002","张三",30));

        //json格式 : [{id:"U001",name:"Jack",age:"20"},{},{}];
        //用Apache的json工具(很多jar包),帮我们把list转成json串
        JSONArray json = JSONArray.fromObject(users);
        String strJson=json.toString();
        response.getWriter().print(strJson);

        //封装复杂数据map
        Map<String,Object> map = new HashMap<String, Object>();
        map.put("id", "M001");
        map.put("addr", "益阳");
        map.put("tel", "9999999");
        map.put("user", new User("U003", "Rose", 25));
        JSONArray json2 = JSONArray.fromObject(map);
        String strJson2=json.toString();
        System.out.println(strJson2);

    }

用阿里的fastjson工具：

JS代码一样：
Servlet：

“`
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding(“UTF-8”);
response.setContentType(“text/html;charset=utf-8”);
List users = new ArrayList();
users.add(new User(“U001”,”Jack”,20));
users.add(new User(“U002”,”张三”,30));

    //json格式 : [{id:"U001",name:"Jack",age:"20"},{},{}];
    //用阿里的fastjson工具(只有一个jar包),帮我们把list转成json串

    String strJson=JSON.toJSONString(users);

    response.getWriter().print(strJson);

    //封装复杂数据map
    Map<String,Object> map = new HashMap<String, Object>();
    map.put("id", "M001");
    map.put("addr", "益阳");
    map.put("tel", "9999999");
    map.put("user", new User("U003", "Rose", 25));
    String strJson2=JSON.toJSONString(map);
    System.out.println(strJson2);

}

工具下载地址：

http://pan.baidu.com/s/1qXZQC3M