Java Web 项目里的前台与后台之间的交互是一个重点
今天记录Spring 框架下前后台数据交互的方式
1.Form 表单 + request 方式
前端提交表单
<div class="container" >
<form action="/admin/login" method="post">
<input type="text" name="adminId">
<input type="password" name="pwd">
<input type="submit" value="提交">
</form>
</div>
注意,name属性是后台获取数据的依据,一定不要随便乱写,方法要指明,否则默认为 GET
@RequestMapping("/login")
public ModelAndView login(HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException{
ModelAndView mv = new ModelAndView();
String adminId = request.getParameter("adminId");
String pwd = request.getParameter("pwd");
mv.addObject("admin",admin);
mv.setViewName("adminPage");
return mv;
}
用 request.getParameter(表单数据 name) 获取到数据,如果是直接的表单 form,就需要用 ModelAndView 做数据的传输 加 页面的跳转 ModelAndView.setViewName() 设置跳转的页面 addObject() 添加传输到前台的数据
跳转页面之后如何取出 ModelAndView 里面带的数据呢?
JSP: 使用 EL 表达式 ${对象.属性} 即可,但是对象名是 addObject("对象名", object ) 时设置的
FreeMarker: FreeMarker 的取值方式与 JSP 类似,也是使用类似EL表达式的 ${对象名.属性名}
Thymeleaf: <span th:text="${book.author.name}"> <li th:each="book : ${books}">
2. Ajax + request
页面上进行 Ajax 提交
function test() {
var token = getCookie("token");
var data = {
hi:"hello"
};
$.ajax({
url:"/admin/token/show",
data:data,
type:"post",
cache:false,
dataType:"json",
success :function (data) {
alert(data.msg);
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", token);
},
error : function (data) {
alert("请求超时");
}
})
}
后台数据的提取与前面是一样的,但是返回值类型不一样,Ajax请求完成之后是要返回到当前页面的,所以我们不在后台用
ModelAndView进行页面的跳转,我们得把数据传回原页面
@ResponseBody
@RequestMapping("/token/show")
public Map show(HttpSession session, HttpServletRequest request, HttpServletResponse response) throws IOException{
Map<String,Object> result = new HashMap<>();
result.put("status",true);
result.put("msg","ok");
return result;
}
注意,如果返回的是数据,必须加上 @ResponseBody 注解,或者是在 Controller 类添加 @RestController
如果Ajax选择的返回值类型是 Json,那么建议我们controller 里的方法的返回值使用 Map
前端 Ajax 收到返回后再做其他处理
3.使用Spring注解 @Vaild 对象类 对象名 传递数据
<body>
姓名:<input type="text" id="name" name="name"/><br/>
年龄:<input type="text" id="age" name="age"/><br/>
<input type="button" onclick="submitData()" value="提交"/>
</body>
Ajax的传递时一定要注意传递的 Key 的命名, Key :Value 中 Key的命名需要与对象的属性名一致
例如:Student 对象 有 属性 name,age
那么 Ajax 需要这么写
<script>
function submitData() {
var data = {
name : $("name").val(),
age : $("$age").val()
}
var url = "/stu/login"
$.ajax({
url : url,
type : "post",
data : data,
dataType : "json",
cache : false,
success : function (data) {
if(data.status == true){
alert("ok");
}else{
alert("false");
}
},
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", token);
},
error : function () {
alert("请求超时");
}
})
}
</script>
这么写了之后,后台就可以用Student对象类的数据类型取获取数据了
不一定Student类的所有属性值都要有注入,有个别的甚至没有都是可以的
@RequestMapping("/add")
public String add(@Valid Student student, BindingResult bindingResult){
if(bindingResult.hasErrors()){
return bindingResult.getFieldError().getDefaultMessage();
}else{
...
return "添加成功";
}
}
这样取出来的 student 对象里会自动注入 name 和 age 属性,前提是你的Student类里面对这些属性都写了Getter 和 Setter方法
4.Ajax 提交 Form 表单
function updateImg(x) {
var form = new FormData(x);
var url = myPath+"/upload/stuImg";
$.ajax({
url:url,
data:form,
type:'post',
processData:false,
contentType:false,
success : function(data){
if(data.status == true){
alert("更新成功");
window.location.reload();
}else{
alert(data.msg);
}
},
error : function(data){
alert("连接超时");
}
});
}
processData:false表示传输的是 二进制数据,根据情景使用
5.使用编号访问同页面不同数据的方式
@RequestMapping("/preUpdate/{id}")
public ModelAndView preUpdate(@PathVariable("id")Integer id){
ModelAndView mav=new ModelAndView();
mav.addObject("book", bookDao.getOne(id));
mav.setViewName("bookUpdate");
return mav;
}
提交表单或Ajax时的 url 后面跟上id 如: localhost:8080/user/preUpdate/2
6.使用 Get 方法是 url 后跟的参数可以直接传输
@GetMapping("/delete")
public String delete(Integer id){
bookDao.delete(id);
return "forward:/book/list";
}
如这里删除需要 id ,那么就再 Get Url后面跟 id 参数
如 localhost:8080/user/delete?id=2
7.使用 @RequestPara 注解
@RequestMapping(value="/index")
public String helloaction(@RequestParam(value="name",required=false)String myName, Model model){
//name要与前端提交Key一致,将name的值注入myName
System.out.println(myName);
model.addAttribute("hello", "这是用action传过来的值:"+myName);
return "index";
}
Spring 前后端之间数据的交互方式非常多,没有哪种更好,是有哪种比较适合