jquery ajax getJson()

谁借莪１个温暖的怀抱￠ 2023-03-04 08:15 140阅读 0赞

--------------------

### jquery ajax getJson() ###

**应用：从json文件，或者从后端服务器中获取json数据**

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**语法：getJson(url，\[data\]，\[callback\])**

**url：**加载json数据的地址

**data：**可选，传递给后端服务的数据

**callback：**可选，**请求成功后调用，回调参数：**

**data：**响应数据

**status：**请求状态

**xmlhttpRequest：**http请求对象

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**示例：加载json文件**

![20200802170521357.png][]

**test.json**

{
      "username": "瓜田李下",
      "age": 20
    }

**index.html**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.getJSON("/json/test.json",function (data) {
                    $.each(data,function (index,object) {
                        $("span").append("<strong style='color: red'>"+object+"</strong><br>");
                    })
                })
            })
        })
    </script>
    <body>
    <div th:align="center">
        <span></span>
        <button id="btn">加载 json 数据</button>
    </div>
    </body>
    </html>

**点击按钮**

![20200802170754567.png][]

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**示例：后端服务器加载json数据**

**HelloController**

@RestController
    public class HelloController {
    
        @RequestMapping("/hello")
        public String hello(){
            return "hello 瓜田李下";
        }
    
        @RequestMapping("/hello2")
        public String hello2(String name){
            return "hello "+name;
        }
    
        @RequestMapping("/hello3")
        public Map<String,String> hello3(String name){
            Map<String,String> map=new HashMap<>();
            map.put("info",name);
    
            return map;
        }
    }

**返回的数据类型为map json格式会解析，返回string不会解析**

**index.html**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.getJSON({
                    url: "/hello3",
                    data: {
                        name: "瓜田李下"
                    },
                    success: function (data) {
                        $.each(data,function (index,object) {
                            $("span").append("<strong style='color: coral'>"+object+"</strong><br>");
                        })
                    }
                });
            })
        })
    </script>
    <body>
    <div th:align="center">
        <span></span>
        <button id="btn">加载 json 数据</button>
    </div>
    </body>
    </html>

**点击按钮**

![20200802172133827.png][]

### \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* ###

**示例：后端加载 json 数据（跨域）**

**helloController（端口号：8081）**

@RestController
    public class HelloController {
    
        @RequestMapping("/hello")
        public void hello(HttpServletRequest request, HttpServletResponse response) throws Exception{
            Map<String,Object> map=new HashMap<>();
            map.put("name",request.getParameter("name"));
            map.put("age",20);
    
            String callbackName=request.getParameter("jsonCallback");
            response.setCharacterEncoding("utf-8");
            response.getWriter().println(callbackName+"("+ JSON.toJSONString(map)+")");
        }
    }

**jsonCallback：回调参数参数名**，**callbackname：随机生成的函数名**

**index.html（端口号：8080）**

<!DOCTYPE html>
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml"
          xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/jquery/jquery-3.5.1.min.js"></script>
    </head>
    <script>
        $(function () {
            $("#btn").click(function () {
                $.getJSON({
                    url: "http://localhost:8081/hello?jsonCallback=?",
                    data: {
                        name: "海贼王"
                    },
                    success: function (data) {
                        $.each(data,function (index,object) {
                            $("span").append("<strong style='color: coral'>"+object+"</strong><br>");
                        })
                    }
                });
            })
        })
    </script>
    <body>
    <div th:align="center">
        <span></span>
        <button id="btn">加载 json 数据</button>
    </div>
    </body>
    </html>

**点击按钮**

![20200802184942688.png][]

[20200802170521357.png]: /images/20230208/c8b8604ebe8e4820b9a1101cbae11ffc.png
[20200802170754567.png]: /images/20230208/f379ddc129fc4bc5b470a7c413289877.png
[20200802172133827.png]: /images/20230208/d74d289e667a4afba843904e998a466f.png
[20200802184942688.png]: /images/20230208/7592e698a50d40df9431efa071569610.png