當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
SpringMVC中使用ajax
生活随笔
收集整理的這篇文章主要介紹了
SpringMVC中使用ajax
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在SpringMVC處理JSON數據中介紹了SpringMVC如何返回一個json對應的對象或者數組。這篇將介紹一下，SpringMVC在使用ajax時的幾種情況。
測試一：發送get請求,不帶參數
實驗代碼：
實體類：Employ
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后拼接數據
測試三：發送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注解
控制臺打印的是
可以接收到數據。
使用ajax發送數據，數據的格式是字符串，如果不指定 contentType 為 application/json，則在請求中，數據的格式是：
此時，如果后端的接口，實體類參數標注了@RequestBody ，就會報錯，如果沒有添加這個注解，不報錯，但是無法獲取到前端傳遞的值。
總結
以上是生活随笔為你收集整理的SpringMVC中使用ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Springboot——mybatis配
- 下一篇： 齐振宏教授 变革领导力导师