SpringMVC中處理Ajax請(qǐng)求的示例
創(chuàng)建名為spring_mvc_ajax的新module,過程參考9.1節(jié)和9.5節(jié)
10.1、SpringMVC處理Ajax請(qǐng)求
10.1.1、頁面請(qǐng)求示例
<input type="button" value="測(cè)試SpringMVC處理Ajax請(qǐng)求" onclick="testAjax()"> <script type="text/javascript"> function testAjax() { // 實(shí)例化 XMLHttpRequest 對(duì)象 var xhr = new XMLHttpRequest() // 設(shè)置請(qǐng)求方式和請(qǐng)求路徑 // 因?yàn)閠hymeleaf語法只能應(yīng)用于html的屬性,所以在js中的請(qǐng)求要包含上下文信息 xhr.open("post","/spring_mvc_ajax/test/ajax?id=1001") // 設(shè)置請(qǐng)求頭 // 一般 get 不需要設(shè)置,而 post 必須設(shè)置請(qǐng)求頭 // 必須寫在在open()和send()之間 xhr.setRequestHeader("Content-Type", "application/json") // 發(fā)送請(qǐng)求 // JSON.stringify() 是用來將合法的JSON數(shù)據(jù)字符串化的 xhr.send( JSON.stringify( {"username":"admin","password":123} ) ) // 設(shè)置 XMLHttpRequest 對(duì)象狀態(tài)變化事件的處理函數(shù) xhr.onreadystatechange = function () { // readyState的值為4時(shí),表示已獲取到服務(wù)器的響應(yīng) if (xhr.readyState == 4){ // 在瀏覽器控制臺(tái)輸出服務(wù)器響應(yīng)的內(nèi)容 console.log(xhr.responseText) } } } </script>
10.1.2、控制器方法示例
@RequestMapping("/test/ajax") public void testAajx(Integer id , HttpServletResponse response) throws IOException { // 通過形參獲取 url 中的請(qǐng)求參數(shù) System.out.println("id:"+id); // 通過 HttpServletResponse 對(duì)象為 Ajax 請(qǐng)求響應(yīng)(字符串)數(shù)據(jù) response.getWriter().write("hello,ajax"); }
10.1.3、測(cè)試效果
10.2、@RequestBody注解的基礎(chǔ)示例
10.2.1、作用
@RequestBody 注解用于將請(qǐng)求體中的內(nèi)容和控制器方法中的形參進(jìn)行綁定
10.2.2、控制器方法示例
頁面請(qǐng)求示例,見10.1.1節(jié)
@RequestMapping("/test/ajax") public void testAajx(Integer id ,@RequestBody String requestBody ,HttpServletResponse response) throws IOException { // 通過形參獲取 url 中的請(qǐng)求參數(shù) System.out.println("id:"+id); // 通過 @RequestBody 注解后的形參,獲取請(qǐng)求體中的內(nèi)容 System.out.println("requestBody:"+requestBody); // 通過 HttpServletResponse 對(duì)象為 Ajax 請(qǐng)求響應(yīng)(字符串)數(shù)據(jù) response.getWriter().write("hello,ajax"); }
10.2.3、測(cè)試效果
10.3、@RequestBody注解的進(jìn)階示例
10.3.1、前提條件一(引入jackson依賴)
<!--jackson--> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.12.1</version> </dependency>
10.3.2、前提條件二(開啟mvc的注解驅(qū)動(dòng))
mvc的注解驅(qū)動(dòng),在配置視圖控制器和默認(rèn)的servlet處理器的時(shí)候,已經(jīng)開啟;其重要性不言而喻
<!--開啟mvc的注解驅(qū)動(dòng)--> <mvc:annotation-driven></mvc:annotation-driven>
10.3.3、前提條件三(一個(gè)匹配json格式的Java類型)
匹配json格式的Java類型,一般是自定義實(shí)體類或map類型
package online.liaojy.pojo; import java.io.Serializable; /** * @author liaojy * @date 2023/10/30 - 0:02 */ public class User implements Serializable { private Integer id; private String username; private String password; private Integer age; private String gender; public User() { } public User(Integer id, String username, String password, Integer age, String gender) { this.id = id; this.username = username; this.password = password; this.age = age; this.gender = gender; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public Integer getAge() { return age; } public void setAge(Integer age) { this.age = age; } public String getGender() { return gender; } public void setGender(String gender) { this.gender = gender; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '\'' + ", password='" + password + '\'' + ", age=" + age + ", gender='" + gender + '\'' + '}'; } }
10.3.4、頁面請(qǐng)求示例
<input type="button" value="測(cè)試使用@RequestBody注解處理json格式的請(qǐng)求參數(shù)" onclick="testRequestBody()"> <script type="text/javascript"> function testRequestBody() { // 實(shí)例化 XMLHttpRequest 對(duì)象 var xhr = new XMLHttpRequest() // 設(shè)置請(qǐng)求方式和請(qǐng)求路徑 // 因?yàn)閠hymeleaf語法只能應(yīng)用于html的屬性,所以在js中的請(qǐng)求要包含上下文信息 xhr.open("post","/spring_mvc_ajax/test/RequestBody/json") // 設(shè)置請(qǐng)求頭 // 一般 get 不需要設(shè)置,而 post 必須設(shè)置請(qǐng)求頭 // 必須寫在在open()和send()之間 xhr.setRequestHeader("Content-Type", "application/json") // 發(fā)送請(qǐng)求 // JSON.stringify() 是用來將合法的JSON數(shù)據(jù)字符串化的 xhr.send( JSON.stringify( {"username":"admin","password":"123","age":18,"gender":"男"} ) ) // 設(shè)置 XMLHttpRequest 對(duì)象狀態(tài)變化事件的處理函數(shù) xhr.onreadystatechange = function () { // readyState的值為4時(shí),表示已獲取到服務(wù)器的響應(yīng) if (xhr.readyState == 4){ // 在瀏覽器控制臺(tái)輸出服務(wù)器響應(yīng)的內(nèi)容 console.log(xhr.responseText) } } } </script>
10.3.5、控制器方法示例(自定義實(shí)體類)
// 通過 @RequestBody 注解形參,將json格式的請(qǐng)求參數(shù)轉(zhuǎn)換為Java對(duì)象(自定義實(shí)體類) @RequestMapping("/test/RequestBody/json") public void testRequestBody(@RequestBody User user,HttpServletResponse response) throws IOException { System.out.println("user:"+user); response.getWriter().write("hello,RequestBody"); }
10.3.6、測(cè)試效果(自定義實(shí)體類)
因?yàn)閖son格式的請(qǐng)求參數(shù)中,沒有包含id的鍵值對(duì),所以轉(zhuǎn)換后的Java實(shí)體類對(duì)象的id值為null
10.3.7、控制器方法示例(map集合)
// 通過 @RequestBody 注解形參,將json格式的請(qǐng)求參數(shù)轉(zhuǎn)換為Java對(duì)象(map集合) @RequestMapping("/test/RequestBody/json") public void testRequestBody(@RequestBody Map<String,Object> map, HttpServletResponse response) throws IOException { System.out.println("map:"+map); response.getWriter().write("hello,RequestBody"); }
10.3.8、測(cè)試效果(map集合)
10.4、@ResponseBody注解的基礎(chǔ)示例
10.4.1、作用
@ResponseBody 注解用于將控制器方法的返回值,作為響應(yīng)報(bào)文的響應(yīng)體,響應(yīng)到瀏覽器
10.4.2、頁面請(qǐng)求示例
<a th:href="@{/test/ResponseBody}" rel="external nofollow" >測(cè)試通過@ResponseBody注解響應(yīng)瀏覽器數(shù)據(jù)</a>
10.4.3、控制器方法示例(沒使用@ResponseBody注解)
@RequestMapping("/test/ResponseBody") public String testResponseBody(){ return "success"; }
10.4.4、測(cè)試效果(沒使用@ResponseBody注解)
沒使用@ResponseBody注解時(shí),return "success"響應(yīng)的是success邏輯視圖所對(duì)應(yīng)的頁面
10.4.5、控制器方法示例(有使用@ResponseBody注解)
@RequestMapping("/test/ResponseBody") @ResponseBody public String testResponseBody(){ return "success"; }
10.4.6、測(cè)試效果(有使用@ResponseBody注解)
有使用@ResponseBody注解時(shí),return "success"響應(yīng)的是success字符串
10.5、@ResponseBody注解的進(jìn)階示例
10.5.1、前提條件
- 引入jackson依賴,參考10.3.1節(jié)
- 開啟mvc的注解驅(qū)動(dòng),參考10.3.2節(jié)
- 一個(gè)匹配json格式的Java類型,參考10.3.3節(jié)
10.5.2、頁面請(qǐng)求示例
<input type="button" value="測(cè)試使用@ResponseBody注解響應(yīng)瀏覽器json格式的數(shù)據(jù)" onclick="testResponseBody()"> <script type="text/javascript"> function testResponseBody() { // 實(shí)例化 XMLHttpRequest 對(duì)象 var xhr = new XMLHttpRequest() // 設(shè)置請(qǐng)求方式和請(qǐng)求路徑 // 因?yàn)閠hymeleaf語法只能應(yīng)用于html的屬性,所以在js中的請(qǐng)求要包含上下文信息 xhr.open("get","/spring_mvc_ajax/test/ResponseBody/json") // 設(shè)置請(qǐng)求頭 // 一般 get 不需要設(shè)置,而 post 必須設(shè)置請(qǐng)求頭 // 發(fā)送請(qǐng)求 xhr.send() // 設(shè)置 XMLHttpRequest 對(duì)象狀態(tài)變化事件的處理函數(shù) xhr.onreadystatechange = function () { // readyState的值為4時(shí),表示已獲取到服務(wù)器的響應(yīng) if (xhr.readyState == 4){ // 在瀏覽器控制臺(tái)輸出服務(wù)器響應(yīng)的內(nèi)容 // JSON.parse()用來將JSON字符串,解析成字符串描述的JavaScript值或?qū)ο? console.log(JSON.parse(xhr.responseText)) } } } </script>
10.5.3、Java對(duì)象與Json數(shù)據(jù)的轉(zhuǎn)換關(guān)系
Java對(duì)象 | Json數(shù)據(jù) |
---|---|
實(shí)體類 | Json對(duì)象 |
map集合 | Json對(duì)象 |
list集合 | Json數(shù)組 |
10.5.4、控制器方法示例(實(shí)體類)
使用@ResponseBody注解,可以取代將Java對(duì)象通過第三方類庫(kù)轉(zhuǎn)換為Json字符串的繁瑣過程
@RequestMapping("/test/ResponseBody/json") @ResponseBody public User testResponseBodyjson(){ User user = new User(1001, "admin", "123456", 28, "男"); return user; }
10.5.5、測(cè)試效果(實(shí)體類)
10.5.6、控制器方法示例(map集合)
@RequestMapping("/test/ResponseBody/json") @ResponseBody public Map<String,Object> testResponseBodyjson(){ User user1 = new User(1001, "admin1", "123456", 28, "男"); User user2 = new User(1002, "admin2", "123456", 28, "男"); User user3 = new User(1003, "admin3", "123456", 28, "男"); Map<String, Object> map = new HashMap<String, Object>(); map.put("1001",user1); map.put("1002",user2); map.put("1003",user3); return map; }
10.5.7、測(cè)試效果(map集合)
10.5.8、控制器方法示例(list集合)
@RequestMapping("/test/ResponseBody/json") @ResponseBody public List<User> testResponseBodyjson(){ User user1 = new User(1001, "admin1", "123456", 28, "男"); User user2 = new User(1002, "admin2", "123456", 28, "男"); User user3 = new User(1003, "admin3", "123456", 28, "男"); LinkedList<User> users = new LinkedList<User>(); users.add(user1); users.add(user2); users.add(user3); return users; }
10.5.9、測(cè)試效果(list集合)
與map集合轉(zhuǎn)換后的json相比,list集合轉(zhuǎn)換后的json外面用的是中括號(hào)(數(shù)組的符號(hào)),而且還有長(zhǎng)度
10.6、@RestController注解
- @RestController 注解是springMVC提供的一個(gè)復(fù)合注解;
- 其標(biāo)識(shí)的位置是在類上面;
- 其效果相當(dāng)于為類添加了 @Controller 注解,并且為其中的所有方法都添加了 @ResponseBody 注解
@Controller public class TestAjaxController { @RequestMapping("/test/ResponseBody") @ResponseBody public String testResponseBody(){ return "success"; } @RequestMapping("/test/ResponseBody/json") @ResponseBody public User testResponseBodyjson(){ User user = new User(1001, "admin", "123456", 28, "男"); return user; } }
@RestController public class TestAjaxController { @RequestMapping("/test/ResponseBody") public String testResponseBody(){ return "success"; } @RequestMapping("/test/ResponseBody/json") public User testResponseBodyjson(){ User user = new User(1001, "admin", "123456", 28, "男"); return user; } }
到此這篇關(guān)于SpringMVC之處理Ajax請(qǐng)求的文章就介紹到這了,更多相關(guān)SpringMVC處理Ajax請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- SpringMVC ajax請(qǐng)求的處理方法介紹
- Springmvc處理ajax請(qǐng)求并返回json數(shù)據(jù)
- Spring MVC中處理ajax請(qǐng)求的跨域問題與注意事項(xiàng)詳解
- Springmvc ajax跨域請(qǐng)求處理方法實(shí)例詳解
- springMVC解決ajax請(qǐng)求亂碼的三種方法
- Spring MVC 中 AJAX請(qǐng)求并返回JSON的示例
- SpringMVC環(huán)境下實(shí)現(xiàn)的Ajax異步請(qǐng)求JSON格式數(shù)據(jù)
- Spring MVC 處理Ajax請(qǐng)求的方式詳解
相關(guān)文章
詳解Intellij IDEA的Facets和Artifacts
這篇文章主要介紹了Intellij IDEA的Facets和Artifacts的相關(guān)知識(shí),本文通過實(shí)例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-09-09對(duì)Mapper 中幾種update的區(qū)別說明
這篇文章主要介紹了對(duì)Mapper 中幾種update的區(qū)別說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11Java設(shè)計(jì)模式之組合模式(Composite模式)介紹
這篇文章主要介紹了Java設(shè)計(jì)模式之組合模式(Composite模式)介紹,Composite定義:將對(duì)象以樹形結(jié)構(gòu)組織起來,以達(dá)成“部分-整體” 的層次結(jié)構(gòu),使得客戶端對(duì)單個(gè)對(duì)象和組合對(duì)象的使用具有一致性,需要的朋友可以參考下2015-03-03JDK8新特性-java.util.function-Function接口使用
這篇文章主要介紹了JDK8新特性-java.util.function-Function接口使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04面試題:Java 實(shí)現(xiàn)查找旋轉(zhuǎn)數(shù)組的最小數(shù)字
這篇文章主要介紹了Java 實(shí)現(xiàn)查找旋轉(zhuǎn)數(shù)組的最小數(shù)字,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07