SpringMVC前后台参数传递

　　首先简单了解一下注解 @Controller、@RestController、@RequestMapping、@GetMapping、@PostMapping、@PathVariable、@RequestParam、@RequestBody、@ResponseBody；

　　@Controller：作用于类上；使用此注解，表明当前类作为一个URL映射类。具体的URL映射需要配合@GetMapping 或者@PostMapping使用

　　@RestController：与Controller注解作用一致，区别在于使用此注解相当于为当前类的URL映射方法默认加上注解@ResponseBody。

　　@GetMapping：作用于方法上，映射URL，且请求方式为GET请求

　　@PostMapping：作用于方法上，映射URL，且请求方式为POST方式

　　@RequestMapping：作用于方法上，映射URL，如果不指定method的值，则表明接口请求方式随意。通过method属性，可以指定具体请求方式GET/POST

　　@PathVariable：作用于参数上，指定参数的值取自URL中的某个字段值。

　　@RequestParam：作用于参数上，指定参数的值取值请求参数中的某个字段值

　　@RequestBody：作用于参数上，将参数封装进当前参数对象

　　@ResponseBody: 作用于方法上，响应接口返回数据给前台

　　接下来了解一下 ajax的一些重要参数：url、data、type、contentType、dataType、success、error；

　　URL：对应后台需要请求的url

　　data：请求需要传递的参数数据

　　type：值为get、post

　　contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

　　dataType：表明后端请求成功后返回的数据类型。

　　success：请求成功后的回调接口

　　error：请求错误后的回调接口

　　其他参数请参考：　　http://www.w3school.com.cn/jquery/ajax_ajax.asp

　　Now ，开始

————————————————————————————————————————————————————————————————————————————————

　　1、后台接口：收到参数name，并将name值响应给前台

    @GetMapping("/test")
    @ResponseBody
    public String test(String name){
        return name;
    }

前台请求方式

SpringMVC前后台参数传递

——————————————————————————————————————————————————————————————————————————————————

　　2、后台接口：将参数放在url中

    @ResponseBody
    @RequestMapping("/test/{name}")
    public String test2(@PathVariable("name") String name){
        return name;
    }

前台请求：

SpringMVC前后台参数传递

————————————————————————————————————————————————————————————————————————————————————————

　　3、后台接口：此接口与实例1，大同小异。关键点在于前台传递的参数名称，@RequestParam就是用来解决前后台参数不一致的问题

    @RequestMapping("/test2")
    @ResponseBody
    public String test3(@RequestParam("name") String name){
        return name;
    }

前台请求：

SpringMVC前后台参数传递

————————————————————————————————————————————————————————————————————————————————————————————

　　4、后台请求：

    @ResponseBody
    @PostMapping("/formSubmit")
    public User test(User user){
        return user;
    }

前台页面：html5，button默认具有提交表单功能

    <form action="/formSubmit" method="post">
        <input type="text" name="name" placeholder="姓名">
        <input type="text" name="address" placeholder="地址">
        <input type="text" name="school" placeholder="学校">
        <input type="number" name="height" placeholder="身高">
        <button>submit</button>
    </form>

SpringMVC前后台参数传递

前台需要关注的动作：

SpringMVC前后台参数传递

结果：

SpringMVC前后台参数传递

————————————————————————————————————————————————————————————————————————————————————

5、下面说明下前台的ajax异步请求方式。

ajax这里不再使用原始，直接使用jquery提供的封装；再次申明一点，使用ajax，后台的接口必须添加@ResponseBody注解，或者类上添加了@RestController，表明这是一个restful接口；

Ajax基本的结构如下：

      $.ajax({
           url: '',
           type: '',
           dataType: '',
           data:'',
           contentType: '',
           success:function (result) {
                console.log(result);
           },
           error:function () {

           }
       });

对于上面的 1、3 两种类型的URL，可以直接替换这里的url参数，data可以不填写；或者 data：{"name":"章三"} 这种形式传递；此处注意ajax的type类型必须是GET类型。因为是get请求，jquery才会将data中的数据追加到url后面，如下：

SpringMVC前后台参数传递

序列化表单提交：

       var data =  $("#myForm").serialize();
       $.ajax({
           url: '/formSubmit2',
           type: 'POST',
           dataType: 'text',
           data:data,
           success:function (result) {
                console.log(result);
           },
           error:function () {

           }
       });

后台：

    @ResponseBody
    @PostMapping("/formSubmit")
    public User test(User user){
        return user;
    }

前台请求

SpringMVC前后台参数传递

前台响应：

SpringMVC前后台参数传递

接下来通过前台传递json给后台

后台：

    @ResponseBody
    @PostMapping("/formSubmit2")
    public User test2(@RequestBody User user){
        return user;
    }

    @ResponseBody
    @PostMapping("/formSubmit3")
    public Map test(@RequestBody Map user){
        return user;
    }

以上两种方式都可以接收json数据，当然其他类型也是可以的

前台JS：

    var data = $("#myForm").serializeObject();
       $.ajax({
           url: '/formSubmit2',
           type: 'POST',
           dataType: 'text',
           data:JSON.stringify(data),
           contentType: 'application/json;charset=UTF-8',
           success:function (result) {
                console.log(result);
           },
           error:function () {

           }
       });

⚠️：这里的contentType类型，以及data实际是一个json格式字符串。

SpringMVC前后台参数传递

——————————————————————————————————————————————————————————————————————————

以上就是SpingMVC基本数据传递的方式，主要几点：1:URL要能相互照应；2:请求类型要符合后端接口要求 3:请求数据格式呀符合要求； 4:要学会排查问题，主要确定问题位置，区别前段问题还是后段问题，前段问题主要靠浏览器控制台来确定URL的请求、请求方式、请求参数、参数类型。后端主要是注解的使用要符合要求，以及参数封装要正确。

created at 2018-10-23 21:13

秒客网

SpringMVC前后台参数传递

相关文章