首先簡單了解一下註解 @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

SpringMVC前後臺參數傳遞