日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > javascript >内容正文

javascript

SpringMVC中使用ajax

發布時間：2023/12/3 javascript 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 SpringMVC中使用ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在SpringMVC處理JSON數據中介紹了SpringMVC如何返回一個json對應的對象或者數組。這篇將介紹一下，SpringMVC在使用ajax時的幾種情況。

測試一：發送get請求,不帶參數

實驗代碼：
實體類：Employ

public class Employ {private String userName;private int age;@Length(min = 3, max = 5)private String hobby;private double salary;private double height;@JsonIgnore@DateTimeFormat(pattern = "yyyy-MM-dd")private Date birth;//get、post、toString、構造方法，這里就省略了}

controller 層的方法

@ResponseBody@RequestMapping(value = "/testAjaxGet", method = RequestMethod.GET)public Employ testAjaxGet() {return new Employ("花花牛", 20, "吃草", 118, 12.5);}

jsp頁面

<body> <% pageContext.setAttribute("path", request.getContextPath()); %> <a href="#" class="test1">get</a><br> </body> <script type="text/javascript">$(function(){$(".test1").click(function () {$.ajax({url:"${path}/testAjaxGet",type:"GET",success:function (data) {console.log(data)}})return false;}); </script>

測試二：發送get請求,帶參數

controller層

@ResponseBody@RequestMapping(value = "/testAjaxGet1", method = RequestMethod.GET)public Employ testAjaxGet1(Employ employ){System.out.println(employ);return employ;}

jsp頁面

// 發送get請求帶參方式一，data是js對象，會自動以xxx=XXX&yyy=YYY的形式拼接到url后$(".test2").click(function () {$.ajax({url:"${path}/testAjaxGet1",type:"GET",data:{name:"花花牛",age:18,hobby:"吃草",salary:153},success:function (data) {console.log(data)}})return false;})

當在發送這個請求時，在瀏覽器中可以看到請求的地址，是自動將data中的數據已xxx=XXX&yyy=YY的形式自動拼接

而這個請求中，數據是

get方式的ajax請求，傳參還可以直接在url后拼接數據

$.ajax({url:"${path}/testAjaxGet1?name=花花牛&age=123&salary=123.23&hobby=吃草",type:"GET",success:function (data) {console.log(data)}})return false;})

測試三：發送post請求,不帶參數

controller層

@ResponseBody@RequestMapping(value = "/testAjaxPost", method = RequestMethod.POST)public Employ testAjaxPost(){return new Employ("花花牛", 20, "吃草", 118, 12.5);}

jsp頁面

<body> <% pageContext.setAttribute("path", request.getContextPath()); %> <a href="#" class="test1">Post without params</a><br> <a href="#" class="test2">test POST method with params</a> </body> <script type="text/javascript">$(function () {$(".test1").click(function () {$.ajax({url:"${path}/testAjaxPost",type:"POST",success:function (data) {console.log(data)}})return false;}); </script>

測試四：發送post請求,帶參數

第一種格式，直接發送js對象作為參數

controller層 @ResponseBody@RequestMapping(value = "/testAjaxPost1", method = RequestMethod.POST)public Employ testAjaxPost1(Employ employ){return employ;}

jsp頁面

$(".test2").click(function () {$.ajax({url:"${path}/testAjaxPost1",type:"POST",data:{userName:"花花牛",age:18,hobby:"吃草",salary:12.23,height:123.321},success:function (data) {console.log(data)}})return false;})

當這個請求發送時，對應的請求頭的信息

數據的格式

這種情況下，如果后端的方法參數是實體類，會自動映射裝配，如果實體類標注了@RequestBody，這時就會報錯，錯誤信息如下：

如果使用@RequestBody標注的是一個String類型，則獲取的數據格式是這樣的

@ResponseBody@RequestMapping(value = "/testAjaxPost1", method = RequestMethod.POST)public String testAjaxPost1(@RequestBody String employ){System.out.println(employ);return employ;}

在控制臺打印的結果是：你會發現他是亂碼的

第二種格式，發送json字符串作為參數

使用ajax發送json字符串作為參數，需要指定contentType為 application/json，否則會報錯

controller層

@ResponseBody@RequestMapping(value = "/testAjaxPost1", method = RequestMethod.POST)public String testAjaxPost1(@RequestBody String employ){System.out.println(employ);return employ;}

jsp層

$(".test2").click(function () {var obj = {userName:"花花牛",age:18,hobby:"吃草",salary:12.23,height:123.321};var objString = JSON.stringify(obj);$.ajax({url:"${path}/testAjaxPost1",type:"POST",data:objString,contentType:"application/json",success:function (data) {console.log(data)}})return false;})

此時請求的數據格式是

如果后端方法的參數是String類型，并且標注了@RequestBody注解，則獲得的值是
這就解決了第一種方式使用String類型接收亂碼問題。

如果此時使用實體類作為參數，并且沒有使用@RequestBody注解

@ResponseBody@RequestMapping(value = "/testAjaxPost1", method = RequestMethod.POST)public Employ testAjaxPost1(Employ employ){System.out.println(employ);return employ;}

控制臺打印的是

表明前端傳輸的數據，后端接收不到。
如果加了@RequestBody注解

@ResponseBody@RequestMapping(value = "/testAjaxPost1", method = RequestMethod.POST)public Employ testAjaxPost1(@RequestBody Employ employ){System.out.println(employ);return employ;}

控制臺打印的是

可以接收到數據。

使用ajax發送數據，數據的格式是字符串，如果不指定 contentType 為 application/json，則在請求中，數據的格式是：

此時，如果后端的接口，實體類參數標注了@RequestBody ，就會報錯，如果沒有添加這個注解，不報錯，但是無法獲取到前端傳遞的值。

總結

以上是生活随笔為你收集整理的SpringMVC中使用ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。