springmvc框架寫到現在終於牽扯到小程式了（所以別說我“不務正業”），對於一個應用程式來說，它的本質其實就是無數個對資料進行增刪改查的操作，這裡起到至關重要的就是資料，於是這篇帖子的目的就是實現小程式與後臺資料的互動。

小程式使用的是wx.request的api來提交和接收資料，最常見的就是接收後臺傳過來的json資料，並對其進行解析

先看執行結果：

這裡總結springmvc框架的三種轉json方法

按步驟，從頭開始來：

後臺

web.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
3. <servlet>
4. <servlet-name>springmvc</servlet-name>
5. <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
6. <init-param>
7. <param-name>contextConfigLocation</param-name>
8. <param-value>classpath:config/ybajax.xml</param-value>
9. </init-param>
10. </servlet>
11. <servlet-mapping>
12. <servlet-name>springmvc</servlet-name>
13. <url-pattern>*.mn</url-pattern>
14. </servlet-mapping>
15. <filter>
16. <filter-name>CharacterEncodingFilter</filter-name>
17. <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
18. <init-param>
19. <param-name>encoding</param-name>
20. <param-value>UTF-8</param-value>
21. </init-param>
22. </filter>
23. <filter-mapping>
24. <filter-name>CharacterEncodingFilter</filter-name>
25. <url-pattern>/*</url-pattern>
26. </filter-mapping>
27. </web-app>

匯入springmvc所需要的jar包：http://pan.baidu.com/s/1jIK6sb8
匯入json所需要的jar包：http://pan.baidu.com/s/1i5bnggP

配置檔案 ybajax.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <beans
3. xmlns="http://www.springframework.org/schema/beans"
4. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5. xmlns:mvc="http://www.springframework.org/schema/mvc"
6. xmlns:context="http://www.springframework.org/schema/context"
7. xsi:schemaLocation="http://www.springframework.org/schema/beans
8. http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
9. http://www.springframework.org/schema/mvc
10. http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
11. http://www.springframework.org/schema/context
12. http://www.springframework.org/schema/context/spring-context-3.0.xsd">
13. <context:component-scan base-package="action"/>
14. <!-- 註冊介面卡 -->
15. <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
16. <property name="messageConverters">
17. <list>
18. <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
19. </list>
20. </property>
21. </bean>
22. <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
23. <property name="prefix" value="/jsp/"/>
24. <property name="suffix" value=".jsp"/>
25. </bean>
26. </beans>

注意json需要對應的介面卡類

實體類：User.java （實現bean用到）和 Bean.java（實現List、Map用到）

1. package bean;
2. public class User {
3. private int id;
4. private String username;
5. private int age;
6. public User() {}
7. public User(int id, String username, int age) {
8. this.id = id;
9. this.username = username;
10. this.age = age;
11. }
12. public int getId() {
13. return id;
14. }
15. public void setId(int id) {
16. this.id = id;
17. }
18. public String getUsername() {
19. return username;
20. }
21. public void setUsername(String username) {
22. this.username = username;
23. }
24. public int getAge() {
25. return age;
26. }
27. public void setAge(int age) {
28. this.age = age;
29. }
30. }
31.  
32. package bean;
33. import java.util.ArrayList;
34. import java.util.List;
35. public class Bean {
36. private List<User> listuser= new ArrayList<User>();
37. private Bean(){}
38. public List<User> getListuser() {
39. return listuser;
40. }
41. public void setListuser(List<User> listuser) {
42. this.listuser = listuser;
43. }
44. }

AjaxAction.java

1. package action;
2. import java.util.ArrayList;
3. import java.util.HashMap;
4. import java.util.List;
5. import java.util.Map;
6. import org.springframework.stereotype.Controller;
7. import org.springframework.ui.Model;
8. import org.springframework.web.bind.annotation.RequestBody;
9. import org.springframework.web.bind.annotation.RequestMapping;
10. import org.springframework.web.bind.annotation.RequestMethod;
11. import org.springframework.web.bind.annotation.ResponseBody;
12. import bean.Bean;
13. import bean.User;
14. @Controller
15. @RequestMapping("/user")
16. public class YbAjaxAction{
17. @RequestMapping(method=RequestMethod.POST,value="/bean2json")
18. public @ResponseBody User bean2json(User user){
19. return user;
20. }
21. @RequestMapping(method=RequestMethod.POST,value="/listbean2json")
22. public @ResponseBody List<User> listbean2json(Bean bean){
23. List<User> listuser=bean.getListuser();
24. return listuser;
25. }
26. @RequestMapping(method=RequestMethod.POST,value="/mapbean2json")
27. public @ResponseBody Map<String,Object> mapbean2json(Bean bean){
28. List<User> listuser=bean.getListuser();
29. Map<String, Object> mapuser=new HashMap<String, Object>();
30. mapuser.put("success",true);
31. mapuser.put("detail",listuser);
32. return mapuser;
33. }
34. //表單提交
35. @RequestMapping(method=RequestMethod.POST,value="/json2json")
36. public @ResponseBody User bean2json(@RequestBody Map<String, String> map){
37. String username="";
38. int age=0;
39. if(map.containsKey("username")){
40. username=map.get("username");
41. }
42. if(map.containsKey("age")){
43. age=Integer.parseInt(map.get("age"));
44. }
45. User user=new User(1,username,age);
46. return user;
47. }
48. }

@ResponseBody： 該註解用於將Controller的方法返回的物件，通過適當的HttpMessageConverter轉換為指定格式後，寫入到Response物件的body資料區（用於返回json資料給頁面）
@RequestBody : 該註解用於讀取Request請求的body部分資料，使用系統預設配置的HttpMessageConverter進行解析，然後把相應的資料繫結到要返回的物件上；再把HttpMessageConverter返回的物件資料繫結到 controller中方法的引數上（用於接收前臺的資料）

前臺

index.wxml

1. <view class="container">
2. <button bindtap="bean_json" class="btn">bean_json</button>
3. <button bindtap="listbean_json" class="btn">listbean_json</button>
4. <button bindtap="mapbean_json" class="btn">mapbean_json</button>
5. <view class="line"></view>
6. <form bindsubmit="json_json">
7. <view>
8. <view >username</view>
9. <input name="username" type="text" class="input_bg"/>
10. </view>
11. <view>
12. <view >age</view>
13. <input name="age" type="text" class="input_bg"/>
14. </view>
15. <button formType="submit" class="btn">json_json</button>
16. </form>
17. <text>{{show}}</text>
18. </view>

index.wxss

1. .container {
2. height: 100%;
3. display: flex;
4. flex-direction: column;
5. padding: 20rpx;
6. }
7. .input_bg{
8. background-color: #F8F8F8;
9. border-radius: 10rpx;
10. }
11. .btn{
12. background-color: #A65353;
13. margin: 20rpx;
14. border-radius: 10rpx;
15. color:#F8F8F8;
16. }
17. .line{
18. height: 1rpx;
19. width: 100%;
20. background-color: #A65353;
21. margin: 30rpx 0;
22. }

index.js

1. var app = getApp()
2. Page({
3. data: {
4. show:""
5. },
6. bean_json: function() {
7. var that=this;
8. wx.request({
9. url: 'http://localhost:8080/springMVC/user/bean2json.mn',
10. data: {
11. id:1,
12. username:"toBeMN",
13. age:28
14. },
15. method: 'POST',
16. header: {
17. "Content-Type":"application/x-www-form-urlencoded"
18. },
19. success: function(res){
20. var show="物件轉json
21. username:"+res.data.username+
22. "
23. age:"+res.data.age;
24. that.setData({
25. show:show
26. })
27. }
28. })
29. },
30. listbean_json: function() {
31. var that=this;
32. wx.request({
33. url: 'http://localhost:8080/springMVC/user/listbean2json.mn',
34. data: {
35. 'listuser[0].username':"Hello",
36. 'listuser[0].age':18,
37. 'listuser[1].username':"World",
38. 'listuser[1].age':28
39. },
40. method: 'POST',
41. header: {
42. "Content-Type":"application/x-www-form-urlencoded"
43. },
44. success: function(res){
45. var show="list<物件>轉json ";
46. for(var i=0;i<res.data.length;i++){
47. show+="
48. username:"+res.data[i].username+
49. "
50. age:"+res.data[i].age;
51. }
52. that.setData({
53. show:show
54. })
55. }
56. })
57. },
58. mapbean_json: function() {
59. var that=this;
60. wx.request({
61. url: 'http://localhost:8080/springMVC/user/mapbean2json.mn',
62. data: {
63. 'listuser[0].username':"Hello",
64. 'listuser[0].age':48,
65. 'listuser[1].username':"MINA",
66. 'listuser[1].age':58
67. },
68. method: 'POST',
69. header: {
70. "Content-Type":"application/x-www-form-urlencoded"
71. },
72. success: function(res){
73. var show="map<String,Obiect>轉json ";
74. for(var i=0;i<res.data.detail.length;i++){
75. show+="
76. username:"+res.data.detail[i].username+
77. "
78. age:"+res.data.detail[i].age;
79. }
80. that.setData({
81. show:show
82. })
83. }
84. })
85. },
86. json_json: function(res) {
87. var that=this;
88. console.log(res.detail.value)
89. wx.request({
90. url: 'http://localhost:8080/springMVC/user/json2json.mn',
91. data: res.detail.value,
92. method: 'POST',
93. header: {
94. "Content-Type":"application/json"
95. },
96. success: function(res){
97. var show="表單提交返回json
98. username:"+res.data.username+
99. "
100. age:"+res.data.age;
101. that.setData({
102. show:show
103. })
104. }
105. })
106. },
107. onLoad: function () {
108. }
109. })

所有的對映處理都交由框架，我們只需要設定對的屬性名、變數名，即可自動賦值
例如表單提交，這個應該是最常用的，因為小程式form提交後會將表單中的資料存入一個json串（如果表單中input的name沒有寫，則不會有資料，這是小程式內部對映的神奇之處），所以使用request請求的時候可以直接將json串傳到後臺解析，後臺處理完業務在將結果json傳回前臺，這就是一個互動的過程。

本文來自 碼農大聖 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/zalan01408980/article/details/79806794?utm_source=copy