springmvc-处理Ajax请求并响应数据

1，index页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<h1>index.xml</h1>
<div id="app">
    <input type="button" value="测试SpringMVC处理ajax请求" @click="testAjax()"><br>
    <input type="button" value="测试SpringMVC处理json格式的请求参数" @click="testRequestBody()"><br>
    <!--SpringMVC响应浏览器-->
    <a th:href="@{/responseBody}">测试SpringMVC使用@ResponseBody响应浏览器</a><br>
    <input type="button" value="测试SpringMVC使用注解@ResponseBody响应json格式的数据请求到浏览器" @click="testResponseBody()"><br>
</div>
<script type="text/javascript" th:src="@{/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">
    var vue=new Vue({
        el:"#app",
        methods:{
            testAjax(){//事件方法
                //发送请求ajax请求
                axios.post(
                    "/spring_mvc/ajax?id=5",//请求路径和参数
                    {uname:"admin",pwd:"123"}//json格式的参数
                ).then(response=>{//成功处理请求后要执行的方法
                    //以日志形式将响应数据输出到浏览器控制器
                    console.log(response.data)
                })
            },
            testRequestBody(){
                axios.post(
                    "/spring_mvc/requestBody/json",
                    {uname:"admin",pwd:"123",age:20,gender:"男"}
                ).then(response=>{
                    console.log(response.data)
                });
            },
            testResponseBody(){
                    axios.post("/spring_mvc/responseBody/json").then(response=>{
                        //以日志的形式输出到浏览器控制器
                        console.log(response.data)
                    })
            }
        }
    });
    /**
     * axios({
           url:"",//请求路径
           method:"",//请求方式
           //以name=value&name=value的方式发送的请求参数
           //不管使用的请求方式是get或post，请求参数都会被拼接到请求地址后
           //此种方式的请求参数可以通过request.getParameter()获取
           params:{},
           //以json格式发送的请求参数
           //请求参数会被保存到请求报文的请求体传输到服务器
           //此种方式的请求参数不可以通过request.getParameter()获取
           data:{}
       }).then(response=>{//请求成功执行的函数then
           //将返回结果以日志形式输出到页面控制台
           console.log(response.data);
       });
     */
</script>
</body>
</html>

2，实体类User

package com.dzqc.pojo;

public class User {
    private Integer id;
    private String uname;
    private String pwd;
    private Integer age;
    private String gender;

    public User() {
    }

    public User(Integer id, String uname, String pwd, Integer age, String gender) {
        this.id = id;
        this.uname = uname;
        this.pwd = pwd;
        this.age = age;
        this.gender = gender;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", uname='" + uname + '\'' +
                ", pwd='" + pwd + '\'' +
                ", age=" + age +
                ", gender='" + gender + '\'' +
                '}';
    }
}

3，测试类TestAjaxController

package com.dzqc.controller;

import com.dzqc.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 总结：
 * 1、SpringMVC处理路径中发送的请求参数；
 * 2、SpringMVC处理json请求数据：@RequestBody
 * @RequestBody：将请求体中的内容和控制器方法的形参进行绑定。
 * 使用@RequestBody注解将json格式的请求参数转换为java对象（实体类或Map）的步骤：
 * 第一步：引入jackson依赖；
 * 第二步：开启mvc注解驱动；
 * 第三步：在处理请求的控制器方法的形参位置，直接设置json格式的请求参数要转换的java类型的形参，使用@RequestBody注解标识即可。
 *
 * SpringMVC处理json格式的请求方式
 * 1，引入jackson依赖
 * 2，开启mvc注解驱动
 * 3,将json格式的请求参数要转成的类型，定义在控制器方法的形参中，并且使用@RequestMapping进行标识
 *
 *
 * @ResponseBody     将控制器方法的返回值作为响应体响应给浏览器
 * 将Java对象转换json格式响应给浏览器的步骤：
 * 1，引入Jackson依赖
 * 2，开启mvc注解驱动
 * 3，将转成json格式的Java对象作为控制器方法的返回值，使用@ResponseBody标识控制器方法
 *
 *
 * 常用Java对象转换json格式
 * 实体类->json对象
 * Map集合->json对象
 * list集合->json数组
 */
@Controller  //标识组件
public class TestAjaxController {
    @RequestMapping("/ajax")
    public void testAjax(Integer id, HttpServletResponse response) throws IOException {
        System.out.println("id = " + id);
        //响应数据到浏览器
        response.getWriter().write("hello,ajax");
    }

    @RequestMapping("/requestBody/json")
    public void testRequestBody(@RequestBody Map<String, Object> map, HttpServletResponse response) throws IOException {
        System.out.println("map = " + map);
        response.getWriter().write("hello,RequestBody");
    /*public void testRequestBody(@RequestBody User user, HttpServletResponse response) throws IOException {
        System.out.println("user = " + user);
        response.getWriter().write("hello,RequestBody");
    }*/
    /*public void testRequestBody(@RequestBody String jsonData, HttpServletResponse response) throws IOException {
        System.out.println("jsonData = " + jsonData);
        response.getWriter().write("hello,RequestBody");
    }*/
    }
    @RequestMapping("/responseBody")
    @ResponseBody
    public String testResponseBody(){
        return "success";
    }
    @RequestMapping("/responseBody/json")
    @ResponseBody
    public List<User> testResponseBodyJson(){
        User user=new User(1,"admin","111",18,"女");
        User user2=new User(2,"admin2","121",14,"女");
        User user3=new User(3,"admin3","131",15,"女");
        List<User> userList= Arrays.asList(user,user2,user3);
        return userList;
    }
    /*public Map<String,Object>  testResponseBodyJson(){
        User user=new User(1,"admin","111",18,"女");
        User user2=new User(2,"admin2","121",14,"女");
        User user3=new User(3,"admin3","131",15,"女");
        Map<String,Object> map=new HashMap<String, Object>();
        map.put("1",user);
        map.put("2",user2);
        map.put("3",user3);
        return map;
    }*/
    /*public User  testResponseBodyJson(){
        User user=new User(1,"admin","111",18,"女");
        return user;
    }*/
}

测试springmvc处理ajax请求

测试springmvc处理json格式的请求参数

测试springmvc使用@ResponseBody响应浏览器

测试springmvc使用注解@ResponseBody响应json格式的数据请求到浏览器

springmvc-处理Ajax请求并响应数据

猜你喜欢