spring boot框架下$.get()、$.post()和$.ajax()的应用

最新推荐文章于 2024-05-16 17:36:28 发布

Tony_313726

最新推荐文章于 2024-05-16 17:36:28 发布

阅读量1k

点赞数

分类专栏： spring boot

本文链接：https://blog.csdn.net/sc_942344134/article/details/104223934

版权

spring boot 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3.1 $.ajax()的请求类型为get

3.2 $.ajax()的请求类型为post

4.github工程文件

1.jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

例子：使用 $.get() 方法从服务器上的一个文件中取回数据

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery $.get()方法</title>
<script src="jquery-3.4.1.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("/testGet",function(data,status){
                alert("数据: " + data + "\n状态: " + status);
            });
        });
    });
</script>
</head>
<body>

<button>发送一个HTTP GET请求并获取返回结果</button>

</body>
</html>

后端代码：

//跳转到testGet.html视图
@RequestMapping("/")
   public String toTestGet(){
     return "testGet";
}  


//返回String对象
@GetMapping("/testGet")
@ResponseBody
public String testGet(){
   return "数据：这是从控制器中读取的数据。";
}

2.jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery $.post()方法</title>
<script src="jquery-3.4.1.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.post("/testPost2",{
			name:"菜鸟教程",
			url:"http://www.runoob.com"
		},
		function(data,status){
			alert("数据: \n" + data + "\n状态: " + status);
		});
	});
});
</script>
</head>
<body>

<button>发送一个HTTP POST请求页面并获取返回内容</button>

</body>
</html>

后端代码：

//跳转到testPost.html视图
@RequestMapping("/testPost")
public String toTestPost(){
     return "testPost";
}


//使用注解@RequestParams接收参数
 @PostMapping("/testPost1")
@ResponseBody
public String testPost1(@RequestParam(value = "name") String name,
                            @RequestParam(value = "url") String  url){
    String webName="网站名："+name;
    String webURL="URL地址:"+url;
    return webName+"\n"+webURL;
}

//将参数封装成javaBean对象
@PostMapping("/testPost2")
@ResponseBody
public String testPost2(WebSite webSite){
    String webName="网站名："+webSite.getName();
    String webURL="URL地址:"+webSite.getUrl();
    return webName+"\n"+webURL;
}

2.1@RequestParam

注解@RequestParam，将请求参数绑定到控制器的方法参数上

@RequestParam有三个配置参数：

required 表示是否必须，默认为 true，必须。
defaultValue 可设置请求参数的默认值。
value 为接收url的参数名（相当于key值）。

@RequestParam用来处理 Content-Type 为 application/x-www-form-urlencoded 编码的内容，Content-Type默认为该属性。@RequestParam也可用于其它类型的请求，例如：POST、DELETE等请求。

2.2@RequestBody

注解@RequestBody接收的参数是来自requestBody中，即请求体。一般用于处理非 Content-Type: application/x-www-form-urlencoded编码格式的数据，比如：application/json、application/xml等类型的数据。

就application/json类型的数据而言，使用注解@RequestBody可以将body里面所有的json数据传到后端，后端再进行解析。

GET请求中，因为没有HttpEntity，所以@RequestBody并不适用。

POST请求中，通过HttpEntity传递的参数，必须要在请求头中声明数据的类型Content-Type，SpringMVC通过使用

HandlerAdapter 配置的HttpMessageConverters来解析HttpEntity中的数据，然后绑定到相应的bean上。

3.$.ajax()

定义和用法

ajax() 方法用于执行 AJAX（异步 HTTP）请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

语法

$.ajax({name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。

名称/值参考

3.1 $.ajax()的请求类型为get

定义和用法

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

语法

$(selector).get(url,data,success(response,status,xhr),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型： "xml" "html" "text" "script" "json" "jsonp"

下面的例子使用 $.ajax()的请求类型为get, 连同请求一起发送数据：

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试ajax()的get</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
    $(document).ready(function(){
	$("button").click(function(){
        $.ajax({
            url:"/testAjaxGet",
            type:"get",
            data:getTestJson(),
            dataType:"json",
            success:function(data){
			    alert("数据:\n" + data.name+"\n"+data.url);
		    },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                //这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
            　　　alert(XMLHttpRequest.responseText);
                  alert(XMLHttpRequest.status);
                  alert(XMLHttpRequest.readyState);
                  alert(textStatus); // parser error;
            }
        });
         function getTestJson() {
            var data = {
                "name":"菜鸟教程",
                "url":"123456",
            };
            return data;
        }
    });
});
</script>
</head>
<body>
<button>发送一个HTTP AJAX-Get请求并获取返回结果</button>
</body>
</html>

后端代码：

    //测试ajax的get类型
    @GetMapping("/testAjaxGet")
    @ResponseBody
    public WebSite testAjaxGet(WebSite webSite){
        return webSite;
    }

3.2 $.ajax()的请求类型为post

下面的例子使用 $.ajax()的请求类型为post, 连同请求一起发送数据：

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试ajax()的get</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
    $(document).ready(function(){
	$("button").click(function(){
        $.ajax({
            url:"/testAjaxPost",
            type:"post",
            data:getTestJson(),
            dataType:"json",
            success:function(data){
			    alert("数据:\n" + data.name+"\n"+data.url);
		    },
            error:function(XMLHttpRequest, textStatus, errorThrown) {
                //这个error函数调试时非常有用，如果解析不正确，将会弹出错误框
            　　　alert(XMLHttpRequest.responseText);
                  alert(XMLHttpRequest.status);
                  alert(XMLHttpRequest.readyState);
                  alert(textStatus); // parser error;
            }
        });
         function getTestJson() {
            var data = {
                "name":"菜鸟教程",
                "url":"123456",
            };
            return data;
        }
    });
});

</script>
</head>
<body>
<button>发送一个HTTP GET请求并获取返回结果</button>
</body>
</html>

后端代码：

    //测试ajax的post类型
    @PostMapping("/testAjaxPost")
    @ResponseBody
    public WebSite testAjaxPost(WebSite webSite){
        return webSite;
    }

4.github工程文件

study-jquery-ajax

Tony_313726

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
spring boot框架下$.get()、$.post()和$.ajax()的应用

目录1.jQuery $.get() 方法2.jQuery $.post() 方法2.1@RequestParam2.2@RequestBody3.$.ajax()3.1$.ajax()的请求类型为get3.2$.ajax()的请求类型为post4.github工程文件1.jQuery $.get() 方法$.get() 方法通过 HTTP GET 请...
复制链接

扫一扫