jquery ajax get()

╰半夏微凉° 2023-03-04 06:57 27阅读 0赞

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

### jquery ajax get() ###

**应用：使用get方式发送异步请求，从后端获取数据**

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

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

**url：**请求发送地址

**data：**可选，传递给后端的参数

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

**response：**请求返回数据

**status：**请求结果状态

**xmlHttpRequest：**http请求对象

**type：结果返回类型，可包括：xml、html、text、script、json、jsonp**

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

**示例**

**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;
        }
    }

**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 () {
                $.get({
                    url: "/hello2",
                    data: {
                        name: "瓜田李下"
                    },
                    success: function (result) {
                        $("#span").html("<strong style='color: yellow'>"+result+"</strong>")
                    }
                })
    
                $.get({
                    url: "/hello3",
                    data: {
                        name: "瓜田李下"
                    },
                    success: function (result) {
                        $("#span2").css("color","green").text(result.info);
                    }
                })
            })
        })
    </script>
    <body>
    <div th:align="center">
        <span id="span"></span><br>
        <span id="span2"></span><br>
        <button id="btn">加载数据</button>
    </div>
    </body>
    </html>

**点击btn**

![20200802093420307.png][]

[20200802093420307.png]: /images/20230208/6cd2a0bf4c734b6ba235a2b4e1dfadb8.png