SpringMVC 從入門到精通系列 05——Ajax的實現方式總結

Xiu Yan 2022-01-07 09:46:11 阅读数:431

springmvc 精通 系列 ajax 方式


後文的 java 後臺代碼,省略了以下代碼,使用這種二級目錄結構方便管理一些… 廢話不多說,馬上就開始!

@Controller
@RequestMapping("/testAjax")
public class AjaxController {

...
}

一、$.ajax() 方式

前端:

$('#btn1').click(function (){

var param = {
username:"xiuYan", password:"123456", age: 21};
$.ajax({

url:"testAjax/formAjax1",
contentType:"application/json;charset=UTF-8",
data: JSON.stringify(param),
dataType:"json",
type:"post",
success:function (data) {

console.log(data)
}
})
})

後端:

@RequestMapping("/formAjax1")
public @ResponseBody User testAjax1(@RequestBody User user){

System.out.println("測試方法1");
System.out.println(user);
return user;
}

後臺打印:
在這裏插入圖片描述
前臺響應數據:
在這裏插入圖片描述

注意:

  1. 如果使用 @RequestBody 注解,ajax需要傳 json 字符串,因此需要 JSON.stringify(param) 進行轉換。
  2. 也可以使用 ‘{“username”:“xiuYan”,“password”:“123456”,“age”:21}’,但是更推薦上一種。
  3. @RequestBody 注解的作用是把 json 的字符串轉換成 JavaBean 的對象
  4. $.ajax() 方式實現,需要和 @RequestBody 注解配合使用,其作用是把客戶的 json 對象轉換為 javaBean 對象。(使用該注解前提:contentType 設置為:application/json)

二、$.post() 方式

前端:

$('#btn2').click(function (){

$.post("testAjax/formAjax2",{

username: "xiuYan2",
password: "123456",
age: 22
}, function (data){

console.log(data)
})
})

後端:

@RequestMapping("/formAjax2")
public @ResponseBody User testAjax2(User user){

System.out.println("測試方法2");
System.out.println(user);
return user;
}

後臺打印:
在這裏插入圖片描述

前臺響應:
在這裏插入圖片描述

注意:

  1. json數據使用,json的頭帶雙引號也能解析成功。如"username": “xiuYan2”…
  2. 這裏後臺不需要用 @RequestBody 注解,這樣會報 415錯誤。

$.get() 方法就不一一贅述了,和 $.post() 用法是一樣的。


三、補充:不返回 json 對象的二種方式

在有些情况下,我們不需要返回一個對象,只需要返回一種狀態,根據這種狀態來進行後續動作,那麼這種方式怎麼實現呢?這裏提供打印流以及返回布爾的兩種方式供讀者參考…


3.1 打印流方式實現

前端:

$('#btn3').click(function (){

$.post("testAjax/formAjax3",{

username: "xiuYan3",
password: "123456",
age: 23
}, function (data){

if(data == "yes"){

console.log("成功處理!");
}else{

console.log("失敗處理!");
}
})
})

後端:

@RequestMapping("/formAjax3")
public void testAjax3(User user, HttpServletResponse response) throws IOException {

System.out.println("測試方法3");
System.out.println(user);
//模擬業務層操作
Integer count = 1;
PrintWriter writer = response.getWriter();
if(count == 1){

writer.write("yes");
}else{

writer.write("no");
}
}

後臺打印:
在這裏插入圖片描述
前臺響應:
在這裏插入圖片描述


3.2 返回布爾類型方式實現

前端:

//測試方法4
$('#btn4').click(function (){

$.post("testAjax/formAjax4",{

username: "xiuYan4",
password: "123456",
age: 24
}, function (data){

if(data == true){

console.log("成功處理!");
}else{

console.log("失敗處理!");
}
})
})

後端:

@RequestMapping("/formAjax4")
public @ResponseBody boolean testAjax4(User user, HttpServletResponse response) throws IOException {

System.out.println("測試方法4");
System.out.println(user);
//模擬業務層操作
Integer count = 1;
if(count == 1){

return true;
}else{

return false;
}
}

後臺打印:
在這裏插入圖片描述
前臺響應:
在這裏插入圖片描述


這裏我推薦使用的方式是第二種 $.post() 方式,較為簡潔,但是有的 jquery 版本不支持這個方法,調換相應版本即可。我這裏使用的版本是 jquery-3.3.1.js,$.ajax() 方法與 $.post() 方法都支持。如果大家對文章內容還存在一些疑問,歡迎大家在評論區留言哦~

版权声明:本文为[Xiu Yan]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201070946105240.html