JSONデータの相互作用
フロントエンドは多くの言語で記述できますが、基本的にはバックエンドはJavaで開発されます。C++（長い開発サイクル）、PHP、および#Net（速度の追求、迅速な開発）に加えて、これら3つのタイプをバックエンドで記述することもできます。
ブラウザとJavaプログラムはjsp、jsを使用します。
Android、IOSクライアント、およびJavaプログラムは互いに処理し、JSON文字列を送信します。Javaプログラムはそれを受け取り、JSON文字列を解析し、POJOオブジェクトを形成してから、ビジネス処理を実行します。処理後、それはPOJOまたはラッパークラスオブジェクトまたはListコレクションになり、JSON文字列に変換されてAndroidおよびIOSクライアントに送り返されます。
したがって、JSONデータの相互作用をマスターする場合、フロントエンドがどの言語で開発されているかを気にする必要はありません。
プロジェクトの構造
瓶包
エンティティークラスStudent.java
@Component
@Scope("prototype")
public class Student {
private int id;
private String name;
private int age;
private float score;
public int getId() { return id; }
public void setId(int id) { this.id = id; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getAge() { return age; }
public void setAge(int age) { this.age = age; }
public float getScore() { return score; }
public void setScore(float score) { this.score = score; }
}フロントエンドページindex.jspはajaxを使用してリクエストを開始します
プレーンテキスト（文字列）を要求する場合は、dateTypeの値をtextに変更します。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSON</title>
</head>
<body>
<form>
学号：<input type="text" id="id"><br/>
<button type="button" id="btn">查询学生信息</button>
</form>
<p id="show"></p>
<%-- <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script> --%>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script>
$("#btn").click(function () {
$.ajax({
//开头不能加/，但可以加 ${pageContext.request.contextPath}/
url: "studentController/queryStudent",
type: "post",
// 传给后台的数据类型、使用的字符集。可以缺省，因为data:{},看到{}就会自动作为json处理
// contentType:"application/json;charset=utf-8",
//传给后台的数据，json形式，key是String类型，value可以是多种类型，键值对之间逗号分隔
data: {"id": $("#id").val()},
//期待的返回值类型（回调函数的参数类型）
dataType: "json",
error: function () {
console.log("ajax请求数据失败！");
},
success: function (data) {
//浏览器把接受到的json数据作为js对象，可通过.调用属性
var info = "姓名：" + data.name + "，年龄：" + data.age + "，成绩：" + data.score;
$("#show").text(info);
}
})
});
</script>
</body>
</html>バックグラウンドはコントローラーを使用してajaxリクエストを処理します
単純なデータ型を使用してフロントエンドからデータを受信するか、Beanを使用してそれを受信できます（同じ名前の属性に割り当てられます）。
多くのチュートリアルでは、ビジネスメソッドのパラメーターの前に@RequestBodyを追加して、データをajaxから必要なタイプに変換する必要があると述べています。
実際、バージョンの置き換えにより、SpringMVCの上位バージョンの組み込みコンバーターは、ajaxによって送信されたデータを必要なタイプにすでに変換でき、@ RequestBodyを追加するとエラーが発生します。
ビジネスメソッドにアノテーション@ResponseBodyを追加する必要があります。ソリューションでは、戻り値を応答本文に自動的に追加して、ajaxリクエストに応答します。
リクエストがテキストかjsonかに関係なく、@ ResponseBodyを使用する必要があります。
リクエストがテキストの場合、戻り値のタイプを文字列として書き込みます。
リクエストがjsonの場合、戻り値はBean（学生からの情報の要求など、jsonオブジェクトを返す）として書き込むか、リスト（複数の学生からの情報の要求など、json配列を返す）として書き込むことができます。
@Controller
@RequestMapping("studentController")
public class StudentController {
private Student student;
@Autowired
public void setStudent(Student student) {
this.student = student;
}
@RequestMapping("/queryStudent")
@ResponseBody
public Student queryStudent(int id) {
System.out.println(id);
//此处省略连接数据库查询
student.setName("chy");
student.setAge(20);
student.setScore(100);
return student;
}
}springmvc.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.2.xsd ">
<!--
可以扫描controller、service、...
这里让扫描controller，指定controller的包
-->
<context:component-scan base-package="org.haiwen"></context:component-scan>
<!-- 开启spring对mvc的注解支持(全注解一定要配置) -->
<mvc:annotation-driven>
<mvc:message-converters register-defaults="true">
<!-- 解决Controller返回json中文乱码问题 -->
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
</mvc:message-converters>
</mvc:annotation-driven>
<!-- 静态资源放行 -->
<mvc:default-servlet-handler />
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize">
<value>10000000000</value> <!-- 以字节byte为单位 -->
</property>
<property name="defaultEncoding">
<value>UTF-8</value>
</property>
</bean>
</beans>web.xml
<?xml version="1.0" encoding="UTF-8"?>
<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">
<!-- 配置SpringMVC的核心控制器DispatcherServlet(负责所有请求的公共功能，然后在分发给具体的控制器（我们编写的控制器），完成业务逻辑，响应视图。) -->
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<!--
服务器在启动的时候，去加载springmvc的配置文件
如果不配置就默认去WEB-INF文件夹下找：<servlet-name>-servlet.xml的配置(这种方式需要拷贝配置文件到WEB-INF)
-->
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:springmvc.xml</param-value>
</init-param>
<!-- Servlet容器启动的时候就进行初始化 -->
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<!-- 请求的入口，所有请求都会经过DispatcherServlet处理 /:支持RESTful风格 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 配置编码过滤器 ==>目的：解决SpringMVC post提交数据时的乱码问题 -->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>テスト中
