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;
    }

前台請求方式

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

　　2、后台接口：將參數放在url中

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

 

前台請求：

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

　　3、后台接口：此接口與實例1，大同小異。關鍵點在於前台傳遞的參數名稱，@RequestParam就是用來解決前后台參數不一致的問題

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

前台請求：

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

　　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>

 

前台需要關注的動作：

 

結果：

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

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后面，如下：

 

 

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

序列化表單提交：

       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;
    }

前台請求

前台響應：

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

接下來通過前台傳遞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格式字符串。

 

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

以上就是SpingMVC基本數據傳遞的方式，主要幾點：1:URL要能相互照應；2:請求類型要符合后端接口要求 3:請求數據格式呀符合要求； 4:要學會排查問題，主要確定問題位置，區別前段問題還是后段問題，前段問題主要靠瀏覽器控制台來確定URL的請求、請求方式、請求參數、參數類型。后端主要是注解的使用要符合要求，以及參數封裝要正確。

 

created at 2018-10-23 21:13