222 lines
6.3 KiB
Markdown
222 lines
6.3 KiB
Markdown
|
# 第十四章：JSON 数据和 RESTful 风格的 url
|
|||
|
|
|
|||
|
|
## 1.JSON: JavaSript Object Notation
|
|||
|
|
|
|||
|
|
> JSON数据的两种数据结构：
|
|||
|
|
>
|
|||
|
|
> 1.对象结构
|
|||
|
|
>
|
|||
|
|
> 2.数组结构
|
|||
|
|
|
|||
|
|
## 2.第13章和第14章的区别：
|
|||
|
|
|
|||
|
|
第13章：发送ur1,请求控制器中的某个方法，该方法返回jsp页面
|
|||
|
|
第14章：发送url,请求webapp下的jsp页面，该页面中包含一个门S0N数据，该数据会被传递到控制器中的某个方法上，然后方法再将数据返回显示到浏览器中。
|
|||
|
|
|
|||
|
|
## 3.验证JS0N数据和Java类对象的转换
|
|||
|
|
|
|||
|
|
### 1.创建项目，导包：
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
<dependency>
|
|||
|
|
<groupId>org.springframework</groupId>
|
|||
|
|
<artifactId>spring-web</artifactId>
|
|||
|
|
<version>4.3.6.RELEASE</version>
|
|||
|
|
</dependency>
|
|||
|
|
<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
|
|||
|
|
<dependency>
|
|||
|
|
<groupId>org.springframework</groupId>
|
|||
|
|
<artifactId>spring-webmvc</artifactId>
|
|||
|
|
<version>4.3.6.RELEASE</version>
|
|||
|
|
</dependency>
|
|||
|
|
<dependency>
|
|||
|
|
<groupId>com.fasterxml.jackson.core</groupId>
|
|||
|
|
<artifactId>jackson-annotations</artifactId>
|
|||
|
|
<version>2.8.8</version>
|
|||
|
|
</dependency>
|
|||
|
|
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
|
|||
|
|
<dependency>
|
|||
|
|
<groupId>com.fasterxml.jackson.core</groupId>
|
|||
|
|
<artifactId>jackson-core</artifactId>
|
|||
|
|
<version>2.8.8</version>
|
|||
|
|
</dependency>
|
|||
|
|
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
|
|||
|
|
<dependency>
|
|||
|
|
<groupId>com.fasterxml.jackson.core</groupId>
|
|||
|
|
<artifactId>jackson-databind</artifactId>
|
|||
|
|
<version>2.8.8</version>
|
|||
|
|
</dependency>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.web.xml文件
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
<!-- 打开项目直接访问的页面-->
|
|||
|
|
<welcome-file-list>
|
|||
|
|
<welcome-file>index.jsp</welcome-file>
|
|||
|
|
<welcome-file>index1.jsp</welcome-file>
|
|||
|
|
</welcome-file-list>
|
|||
|
|
|
|||
|
|
<!-- 配置前端控制器DispatcherServlet-->
|
|||
|
|
<servlet>
|
|||
|
|
<servlet-name>springmvc</servlet-name>
|
|||
|
|
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
|
|||
|
|
</servlet>
|
|||
|
|
<servlet-mapping>
|
|||
|
|
<servlet-name>springmvc</servlet-name>
|
|||
|
|
<url-pattern>/</url-pattern>
|
|||
|
|
</servlet-mapping>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.springmvc-servlet.xml文件
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
<!-- 定义组件扫描器：指定需要扫描的包-->
|
|||
|
|
<context:component-scan base-package="com.gzh.controller"/>
|
|||
|
|
<!-- 配置视图解析器-->
|
|||
|
|
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
|
|||
|
|
<property name="prefix" value="/WEB-INF/jsp/"/>
|
|||
|
|
<property name="suffix" value=".jsp"/>
|
|||
|
|
</bean>
|
|||
|
|
<!-- 配置 Spring MVC的注解驱动-->
|
|||
|
|
<mvc:annotation-driven/>
|
|||
|
|
<!-- 配置静态资源的访问映射，配置的文件，将不被前端控制器拦截-->
|
|||
|
|
<mvc:resources mapping="/js/**" location="/js/"/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4.创建实体类对象User
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
package com.gzh.po;
|
|||
|
|
|
|||
|
|
private String username;
|
|||
|
|
private String password;
|
|||
|
|
通过 getter setter 和 toString 方法生成代码
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 5.在WEB-INF下创建 index.jsp
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<head>
|
|||
|
|
<title>测试JSON交互</title>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|||
|
|
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js">
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function testJson() {
|
|||
|
|
var username = $("#username").val();
|
|||
|
|
var password = $("#password").val();
|
|||
|
|
$.ajax({
|
|||
|
|
url: "${pageContext.request.contextPath}/testJson",
|
|||
|
|
type: "post",
|
|||
|
|
data: JSON.stringify({username: username, password: password}),
|
|||
|
|
contentType: "application/json;charset=utf-8",
|
|||
|
|
dataType: "json",
|
|||
|
|
success: function (data) {
|
|||
|
|
if (data != null) {
|
|||
|
|
alert("您输入的用户名为" + data.username + "密码为" + data.password);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form>
|
|||
|
|
用户名<input type="text" name="username" id="username"><br>
|
|||
|
|
密码<input type="password" name="password" id="password"><br>
|
|||
|
|
<input type="button" value="测试JSON交互" onclick="testJson()">
|
|||
|
|
</form>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 6.导入文件 jquery-1.11.3.min.js
|
|||
|
|
|
|||
|
|
在webapp下创建文件夹 js 在文件夹下复制文件
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 7.创建UserController方法
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
package com.gzh.controller;
|
|||
|
|
|
|||
|
|
@Controller
|
|||
|
|
public class UserController {
|
|||
|
|
@RequestMapping("/testJson")
|
|||
|
|
@ResponseBody
|
|||
|
|
public User testJson(@RequestBody User user){
|
|||
|
|
System.out.println(user);
|
|||
|
|
return user;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 8.发布项目
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 4.RESTful支持
|
|||
|
|
|
|||
|
|
### 1.在 UserController 方法中添加查询方法
|
|||
|
|
|
|||
|
|
```java
|
|||
|
|
/**
|
|||
|
|
*接收RESTful风格的请求,其接收方式为GET
|
|||
|
|
*/
|
|||
|
|
@RequestMapping(value="/user/{id}",method= RequestMethod.GET)
|
|||
|
|
@ResponseBody
|
|||
|
|
public User selectUser(@PathVariable("id") String id){
|
|||
|
|
//查看数据接收
|
|||
|
|
System.out.println("id="+id);
|
|||
|
|
User user=new User();
|
|||
|
|
//模拟根据id查询出到用户对象数据
|
|||
|
|
if(id.equals("1234")){
|
|||
|
|
user.setUsername("tom");
|
|||
|
|
}
|
|||
|
|
//返回JSON格式的数据
|
|||
|
|
return user;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2.编写页面文件 restful.jsp
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<head>
|
|||
|
|
<title>RESTful测试</title>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
|
|||
|
|
</script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function search(){
|
|||
|
|
// 获取输入的查询编号
|
|||
|
|
var id = $("#number").val();
|
|||
|
|
$.ajax({
|
|||
|
|
url : "${pageContext.request.contextPath }/user/"+id,
|
|||
|
|
type : "GET",
|
|||
|
|
//定义回调响应的数据格式为JSON字符串,该属性可以省略
|
|||
|
|
dataType : "json",
|
|||
|
|
//成功响应的结果
|
|||
|
|
success : function(data){
|
|||
|
|
if(data.username != null){
|
|||
|
|
alert("您查询的用户是："+data.username);
|
|||
|
|
}else{
|
|||
|
|
alert("没有找到id为:"+id+"的用户！");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form>
|
|||
|
|
编号：<input type="text" name="number" id="number">
|
|||
|
|
<input type="button" value="搜索" onclick="search()" />
|
|||
|
|
</form>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.发布项目
|
|||
|
|
|
|||
|
|
|