（六）利用ajax和后台交互
目前spring boot和前后端分离应用的越来越广，springboot的搭建易用性，前后端分离的开发维护便利性确实值得推广，但是，这些也不妨碍我们通过springmvc来学习基础。上一节，展示了ajax和后台交互数据，这一小节，我们稍微多一点了解这部分，毕竟得到前端数据，处理数据，返回数据，是后台程序的主要任务。
从本节开始，开发工具使用idea替代myeclipse，所有截图及github提供的源码，均在idea下产生
一. GET
使用get方法，一般是通过某种关键字获取到某个数据
比如，通过学号获取学生姓名，通过姓名查找电话号码等
这个时候，就涉及，前端如何给这个关键字到后台，后台如何获取这个关键字
首先，我们修改一下上一节使用的hello.jsp页面，增加一个按钮
<body>
This is my first jsp page. <br>
<br/>
my hello
<br/>
<div class="mydiv">
<input id="myInput"></input>
<button class="mybutton" id="getButton">Gett</button>
<button class="mybutton" id="POSTButton">POST</button>
</div>
<div>
<button class="getButton" style="width: 70px;height: 40px">GetTest</button>
</div>
</body>
增加了一个比较大的按钮，样式先不管了，能用就行
然后，到hello.js中，增加这个按钮的点击触发函数
$('.getButton').click(function(){
alert("get here!!");
});
将工程运行起来，点击按钮，确保触发正确，弹出正确的窗口。
触发这部分做好之后，我们就不用管页面了，只需要在触发函数下面进行测试即可。
请求方式一
早些时候的一种请求方式，比如，请求id为2的学生的信息，链接可能是这样的
/student?id=2
如果有多个参数，比如请求id为2，name为joe的学生的信息，链接可能是这样的
/student?id=2&name=joe
格式就是，参数都跟在?之后，每个参数之间用&隔开。
为了返回数据到页面，一般我们会创建一个返回类
在com.springstart下面，创建一个包 model
这个model和controller是同一层的
然后在model下面，创建一个返回类 StudentResponse，这个就是个简单的pojo类
package com.springstart.model;
public class StudentResponse {
private int code;
private String msg;
private int age;
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 int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
包层次结果是这样的
dir_level.jpg
然后，需要在DemoController中添加一个方法，来接收页面的数据，处理后，返回给页面
对于前面这样的请求方式，后端获取页面给过来的参数较常见的有下面几种：
方法一
@ResponseBody
@RequestMapping(value="/getStudentAge",method=RequestMethod.GET)
public String getAge(HttpServletRequest request){
int id = Integer.valueOf(request.getParameter("id"));
String name = request.getParameter("name");
System.out.println("from page id="+id+" name="+name);
StudentResponse response = new StudentResponse();
if((id == 2) && (name.equalsIgnoreCase("Joe"))){
response.setCode(200);
response.setMsg("success");
response.setAge(10);
return myGson.toJson(response);
}else{
response.setCode(404);
response.setMsg("fail");
response.setAge(0);
return myGson.toJson(response);
}
}
这个是一个典型的简单的controller处理方法，其中，参数是 HttpServletRequest request ，了解过servlet就会知道HttpServletRequest是个神器，什么样的请求，都能够获取到，只是方便不方便的问题。
我们只需要从HttpServletRequest中提取需要的参数即可。
request.getParameter("id")
request.getParameter("name");
这样提取出来的都是String类型，所以，我们要数值型的id需要转换一下。
然后，就是常用的返回方式
目前流行返回json格式的字符串，而用于转换json的工具类很多，我们这里用google出品的gson
private final static Gson myGson = new Gson();
我们要返回给页面的字符串是：
{
"code":200,
"msg":"success",
"age":10
}
这只是一个简单示例，一般正式场合，返回的json会复杂的多
页面根据code和msg来确定操作是否成功，通过age来获取需要得到的年龄数据
正式场合，age 可以替换成data，然后在data下面嵌套json
创建一个StudentResponse对象，然后对成员赋值，最后转换为json返回给页面
response.setCode(200);
response.setMsg("success");
response.setAge(10);
return myGson.toJson(response);
工程跑起来，从页面点击GetTest按钮，正确执行的话，我们可以看到弹出窗口
pop.jpg
再次强调，HttpServletRequest是个神器，能够获取到我们传过来的参数，在想不到方便的办法提取参数的时候，就用它
方法二
为了测试方法二，我们添加一个按钮
<div>
<button class="getButton2" style="width: 70px;height: 40px">GetTest2</button>
</div>
在js文件中，添加这个按钮的触发事件
$('.getButton2').click(function(){
let url = "id=2&name=Joe";
$.ajax({
url:basePath+"/getStudentAge2?"+url,
type:'GET',
dataType:"json",
success:function(result){
if(result.code == 200) {
alert("2 Joe age is " + result.age);
}else{
alert("2 get age fail");
}
}
});
});
点击后，发送请求到 getStudentAge2
@ResponseBody
@RequestMapping(value="/getStudentAge2",method=RequestMethod.GET)
public String getAge2(Integer id,String name){
System.out.println("2 from page id="+id+" name="+name);
return getResponse(id,name);
}
因为上面两个方法都会用到对id的检测和返回age，所以，我们将这部分代码提出来，作为一个方法，这样代码更为简洁
private String getResponse(int id,String name){
StudentResponse response = new StudentResponse();
if((id == 2) && (name.equalsIgnoreCase("Joe"))){
response.setCode(200);
response.setMsg("success");
response.setAge(10);
return myGson.toJson(response);
}else{
response.setCode(404);
response.setMsg("fail");
response.setAge(0);
return myGson.toJson(response);
}
}
这里，我们获取参数的方式很直接，就是在方法的参数和发送过来的请求参数，一一对应。
发送过来的有 id ，name，那么方法的参数就是 id， name，一个字符都不能变
这样，我们就可以接受到页面传过来的参数。
运行服务程序，点击页面的按钮2，可以看到正确的运行结果。
2.Restful风格
最近更换电脑，代码有丢失，也没时间去恢复上面写的。
这里简短的写一下。
Restful风格，是这几年比较流行的一种风格方式，具体有什么优势，我感觉不出来，遇到一些人比较推崇这个方式，也有一些排斥这个方式的
具体到代码这里的用途
主要就是，请求的链接不使用&分隔参数，而是一种对资源的标记的方式
比如，要查询一个用户的信息，URI为 /user/Joe
以前的方式为 ?user=Joe
然后，对于 /user/Joe 在发送时，使用不同的方法 GET POST PUT DELETE等表达对资源的操作，例如
如果是GET 方法，则表示要查询Joe这个用户的信息，
如果是POST 方法，同时会带上数据，则表示要增加Joe这个用户的信息
但是，目前浏览器参差不齐，有些浏览器不支持PUT DELETE等，所以，具体使用还看具体环境
对于这样的请求，后端的接受方式统一如下
@RequestMapping(value = "/user/{name}",method = RequestMethod.GET)
public String doUserInfo(@PathVariable("name") String name){
}
其中的
{name}就是将那么参数化，让方法可以取出来
method根据实际请求方法来选择
@PathVariable("name") String name 就是通过注解，将路径中的参数name指定给方法的参数name，这样就取出了name的值
总结：
GET部分就讲到这里，比较常用的 POST 下一篇再讲，这一节没有源码提供，请自行参考文章编写。
网友评论