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/jQUery
4000
Test',

                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);

                }

            });

        });