黑马程序员技术交流社区

标题: 【上海校区】Ajax&JSON的介绍 [打印本页]

---

作者: 偷树的光头强    时间: 2018-12-12 19:29
标题: 【上海校区】Ajax&JSON的介绍
Ajax的使用

1.JS原生的Ajax请求的思路
       1.创建Ajax引擎对象--XMLHttpRequest对象；
       2.为XMLHttpRequest对象绑定监听（监听服务器，将数据响应给引擎）；
       3.绑定提交地址；
       4.发送请求；
       5.接收响应数据；


2.Jquery的Ajax请求思路

     1.GET请求
             格式：$.get(url,[data],[callback],[type])
               参数说明：
                    url   ：  请求地址
                    data  ：  发送给服务器端的请求参数，格式：方式一：key=value&key=value       方式二：{key:value,key:value...}
                 callback  ： 回调函数：当请求成功后触发的函数
                   type  ：  返回参数类型：取值可以是xml, html, script, json, text, _defaul等

      2.POST请求
              格式：  $.post(url, [data], [callback], [type])
              参数说明：
                     url   ：  请求地址
                    data  ：  发送给服务器端的请求参数，格式可以是key = value，也可以是JS对象
                 callback  ： 回调函数：当请求成功后触发的函数
                   type  ：  返回参数类型：取值可以是xml, html, script, json, text, _defaul等

      3.AJax请求
            格式：   $.ajax({settings}) url,async,data,type,dataType,success,error
            参数说明：
                  

JSON数据格式



注意：
        1.JSON数据的key值：字符串类型，必须加双引号；
        2.JSON数据的value值：任意类型，如果是字符串则必须加双引号；
总结：
        1.java对象  ----->json对象
                {"id":1,"studentAge":10,"studentName":"张三"}
        2.转换List集合  ---->   JSON数组：
              [
                   { "id": 1,"studentAge": 10, "studentName": "张三"},
                   {"id": 2, "studentAge": 12,"studentName": "李四"}
             ]
        3.转换复杂对象-----JSON混合数据类型：
             {                     "course": {
                     "code": "en",
                     "courseName": "英语",
                    "id": 1
             },
                "id": 2,
                "studentAge": 12,
                 "studentName": "李四"
             }

注意：复杂对象也可以用Map<String,Object> 集合来拼接；


结果：{"code":"1001","stu":{"id":2,"studentAge":12,"studentName":"李四"}}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2