至此,页面跳转也已经完成,但是,这仅仅是浏览器和服务器的交互。如果是安卓或者ios发送请求呢?(即手机端和服务器的交互)。这样一来,服务器发回来个页面,导致手机端很难解析。因此,如今常用的方式是利用JSON,服务器把数据传入JSON,然后浏览器和手机客户端分别解析JSON的数据,这样一来就好了很多。接下里就用JSON和ajax。这样就做到了平台无关性
思路:
1、 index.jsp页面之间发送ajax请求进行员工分页数据的查询
2、 服务器将查出的数据,以JSON字符串的形式返回给浏览器
3、 浏览器收到js字符串。可以使用js对JSON进行解析,使用js通过dom增删改来改变页面
4、 返回JSON。实现客户端的无关性
接下来开始实现JSON进行数据传递
1)进入EmployeeController修改,代码如下:
我们将原来的代码注释掉,新添加代码。部分代码解释请看我的注释
package com.atguigu.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/*
* 处理员工CRUD请求
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/*
* 1、@ResponseBody令数据不会被解析,而是直接写入HTTP response body中
* (比如异步获取JSON数据就要用到这个)
* 2、想要@ResponseBody正常工作,需要导入jackson包。这个
* 包负责将对象转化为JSON字符串
*/
@RequestMapping("/emps")
@ResponseBody
public PageInfo getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn){
//这一段不变,查询数据
PageHelper.startPage(pn, 5);
List<Employee> emps=employeeService.getAll();
PageInfo page=new PageInfo(emps,5);
/*
* 此处我们不用添加model,直接返回page对象(里面的数据)
* 结合@ResponseBody,直接将JSON数据添加到response请求中
*/
return page;
}
/*
//查询员工数据(分页查询)
@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
//查出了所有员工。但不是分页
//引入PageHelper分页插件
//在查询之前只需要调用如下方法,从第n页查,每次查5条数据
PageHelper.startPage(pn, 5);
//startPage后面紧跟的这个查询就是一个分页查询
List<Employee> emps=employeeService.getAll();
//将查询到的所有数据利用pageInfo进行包装,
//可以显示一些信息(比如在第几页啥的);此处的5表示连续显示的页数
PageInfo page=new PageInfo(emps,5);
model.addAttribute("pageInfo",page);
return "/list";
}
*/
}
2)添加jackson包(使用@ResponseBody必须要加上的包)
<!-- jackson -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8.1</version>
</dependency>
3)测试运行,在浏览器内输入如下字段http://localhost:8080/ssm_crud/emps
在我的火狐浏览器上效果如下(有那个原始数据就够了)
然后要修改也很容易,在浏览器里添加个pn参数即可,如图:
但是如果我们想要自己添加一些提示信息呢?比如说后台返回个100就代表成功,返回200就代表失败(这个自行定义)。因此我们做如下修改:
package com.atguigu.crud.bean;
import java.util.HashMap;
import java.util.Map;
/*
* 通用的返回的类
*/
public class Msg {
//状态码 假如返回100即代表成功 返回200即失败,这个自行定义的
private int code;
//提示信息
private String msg;
//用户要返回给浏览器的数据
private Map<String,Object> extend=new HashMap<String,Object>();
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
//写个快捷的提示成功和失败的方法
public static Msg success(){
Msg result=new Msg();
result.setCode(100);
result.setMsg("处理成功");
return result;
}
public static Msg fail(){
Msg result=new Msg();
result.setCode(200);
result.setMsg("处理失败");
return result;
}
public Msg add(String key,Object value){
this.getExtend().put(key, value);
return this;
}
}
然后回到EmployeeController.java,代码修改如下:
package com.atguigu.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Employee;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.service.EmployeeService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
/*
* 处理员工CRUD请求
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/*
* 1、@ResponseBody令数据不会被解析,而是直接写入HTTP response body中
* (比如异步获取JSON数据就要用到这个)
* 2、想要@ResponseBody正常工作,需要导入jackson包。这个
* 包负责将对象转化为JSON字符串
*/
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn){
//这一段不变,查询数据
PageHelper.startPage(pn, 5);
List<Employee> emps=employeeService.getAll();
PageInfo page=new PageInfo(emps,5);
/*
* 此处我们不用添加model,直接返回page对象(里面的数据)
* 结合@ResponseBody,直接将JSON数据添加到response请求中
*/
return Msg.success().add("pageInfo",page);
}
}
然后再来看效果:
如图,这样就加上了我们自己设置的提示符