SpringMVC处理ajax请求

使用到的技术

• axios
• vue.js
• SpringMVC

注意事项

• 引入axios和vue源文件
• 保持对静态资源的访问，在spring-mvc.xml中配置<mvc:default-servlet-handler/>

使用到的注解

@RequestBody
@ResponseBody

向后端发送请求

以键值对的形式向后端发送请求参数：

html中的请求发送格式：

<div id="app">
    <input type="button" value="SpringMVC" @click="testAjax()">
</div>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript" src="./js/vue.js"></script>
<script>
    /*
    axios({
        url:"",
        method:"",  //以name=value的方式发送的请求参数，无论使用的方法是get或者post，请求参数都会被拼接到请求地址后
                    //此种方法的请求参数可以通过request。getParameter()获取
        params:{},  //以json格式发送的请求参数，请求参数会被保存到请求报文的请求题传输到服务器
        data:{}
    }).then(response=>{
        console.log(response.data)
    })
    */
    var vue=new Vue({
        el:"#app",
        methods:{
            testAjax(){
                axios.post(
                    "/test/ajax?id=1001",
                    {username:"admin",password:"123456"}
                ).then(response=>{
                    console.log(response.data);
                })
            }
        }
    })
</script>

controller：

@Controller
@RequestMapping("/test")
public class AxiosController {

    @RequestMapping("/ajax")
    public void test(Integer id, HttpServletResponse response) throws IOException {
        System.out.println("id:"+id);	//后端获取参数
        response.getWriter().write("hello,axios");	//返回前端的数据
    }
}

运行结果：
浏览器控制台打印：hello,axios
IDEA控制台打印：id:1001

以json格式发送的请求参数，使用Map集合进行接收

发送请求vue中的方法：

testRequestBodyMap(){
   	axios.post(
        "/test/requestBodyMap",
        {username:"admin",password:"123456",age:23,gender:"male"}
    ).then(response=>{
        console.log(response.data);
    })
},

controller：

@RequestMapping("/requestBodyMap")
public void demo1(@RequestBody Map<String,Object> map, HttpServletResponse response) throws IOException {
    System.out.println(map);
    response.getWriter().write("helloMap");
}

运行结果：
浏览器控制台打印：helloMap
IDEA控制台打印：{username=admin, password=123456, age=23, gender=male}

以json格式发送的请求参数，使用对象进行接收

发送请求vue中的方法：

testRequestBodyObj(){
    axios.post(
        "/test/requestBodyObj",
        {username:"admin",password:"123456",age:23,gender:"male"}
    ).then(response=>{
        console.log(response.data);
    })
},

controller：

@RequestMapping("/requestBodyObj")
public void demo2(@RequestBody User user,HttpServletResponse response) throws IOException {
    System.out.println(user);
    response.getWriter().write("helloObj");
}

运行结果：
浏览器控制台打印：helloObj
IDEA控制台打印：User{id=null, username=‘admin’, password=‘123456’, age=23, gender=‘male’}

发送的请求格式一样，只是接收的方法使用的形参格式不同

@RequestBody

1. 将请求中的内容和控制器方法的形参进行绑定
2. 使用@RequestBody注解将json格式的请求参数转化为java对象
   - 导入jackson依赖
   - 在springMVC的配置文件中设置`<mvc:annotation-driven/>`
   - 在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的java类型的形参，使用@RequestBody注解标识即可

后端响应数据到到前端

vue中的方法：

testResponseBody(){
    axios.post(
        "/test/responseBody"
    ).then(response=>{
        console.log(response.data);
    })
}

controller：

@RequestMapping("/responseBody")
@ResponseBody
public User demo3(){
    User user=new User();
    user.setId(1001);
    user.setUsername("张三");
    return user;
}

运行结果：
浏览器控制台打印：{id: 1001, username: ‘张三’, password: null, age: null, gender: null}

controller方法的返回值可以使对象，数组，集合…

@ResponseBody

将所标识的控制器方法的返回值作为响应报文的响应体响应到浏览器