ajax,json学习笔记（三）JSON和jquery实现ajax

利用JSON实现前后台数据交互，且方便

1、基本概念

    1) JSON(JavaScript Object Notation):javaScript对象表示方法
    2) 是存储和交换文本信息的语法，类似xml,采用键值对的方式来组织
    3) JSON是独立于语言的，任何语言按json规则就能解析json
    4）优点
        长度比xml短，读写速度快，可以用javaScript内建的方法直接解析转换成javascript对像
    

2、JSON 语法规则

    1）JSON 数据书写格式：名称/值 对
        名称和值在双引号中，例如："name":"马玉"
    2）JSON值可以使数字、字符串、逻辑值、数组（在[]中）、对象（在{}中）、null

    例子
    {
            "people": [
            {    
            "name": "郭靖",
                    "age": "12"
            },
            {
                    "name": "黄蓉",
                    "age": "12"
            }]
    }

3、JSON 解析

    1）方法：eval 和 JSON.parse
        注意：eval执行第三方JSON数据危险（可能有恶意代码）,会执行json字符串中的js方法
        JSON.parse()除了解析字符串还可以捕捉JSON中语法错误
    eval:       <script>
                    var jsondata =     '{"people": [{"name": "郭靖","age": "12"},{"name": "黄蓉","age": "12"}]}';
                    var dataObj=eval("("+jsondata+")");
                    alert(dataObj.people[0].name)
               </script>
    JSON.parse：    <script>
                 var jsondata = '{"people": [{"name": "郭靖","age": "12"},{"name": "黄蓉","age": "12"}]}';
                       var dataObj=JSON.parse(jsondata);
                    alert(dataObj.people[0].name)
            </script>
    2)JSON校验工具：http://json.parser.online.fr/

4、约定JSON

    {
        "success":true,
        "msg":"xxx"
    }
    后台通过写成json字符串或者JSONArray.toJSON(Object)等方法把对象转化为json格式数据传到前台，前台js对其进行解析展示

5、 springmvc处理ajax请求

参考：https://www.cnblogs.com/tingbogiu/p/5796199.html

例子
后台： // ajax不用返回页面返回值为void
    @RequestMapping("/jQUeryTest")
    public void jQUeryTest(HttpServletRequest request, HttpServletResponse response){
        List<Category> cs= categoryService.list();
        // 把列表转为json数组，ModelAndView是直接把列表转为json格式
        String jsonResult = JSON.toJSONString(cs);
        renderData(response, jsonResult);
    }

        
    private void renderData(HttpServletResponse response, String data) {
        response.setCharacterEncoding("UTF-8");
        PrintWriter printWriter = null;
        try {
            printWriter = response.getWriter();
            printWriter.print(data);
        } catch (IOException ex) {
            System.out.println(ex);
        } finally {
            if (null != printWriter) {
                printWriter.flush();
                printWriter.close();
            }
        }
      }
页面：$(document).ready(function(){
        $("#test3").click (function(){
            $.ajax({
                type:'POST',
                url:'http://localhost:8080/MyFirstSSM/jQUeryTest',
                data: {
                 },
                dataType:'json',
                success:function(data){    //已经解析
                    $("#test4").text("第1个用户:"+data[0].name);
                },
                error:function(jqXHR){
                    alert('发生错误：'+jqXHR.status);
                }
            });
        });
    });

6、jquery实现ajax

jQuery.ajax([settings])
    通过设置值来完成ajax请求
1、常用设置
    1）type:请求类型，‘post'或‘get'，默认’get'
    2）url:发送请求的地址
    3）data:一个对象，连同请求发送到服务器中的数据
    4）dataType:预期服务器返回的数据类型，如果不指定，jQuery自动根据HTTP包MIME信息智能判断，一般采用JSON，设置为'json'
    5) success:是一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
    6）error:是一个方法，请求失败调用的函数，传入XMLHttpRequest对象
例子
        $("#test3").click (function(){
            $.ajax({
                type:'get',
                url:'http://localhost:8080/MyFirstSSM/listCategory',
                dataType:'json',
                success:function(data){    //已经解析过了字符串
                    $("#test4").text("第2个用户:"+data[1].name);
                },
                error:function(jqXHR){
                    alert('发生错误：'+jqXHR.status);
                }
            });
        });