總結Spring MVC參數綁定的幾種方式

Spring MVC傳參是Spring學習中的比較容易混淆的地方，因爲傳參方式種類多，接受參數種類多，初學者較容易因爲不懂HTTP參數傳遞原理，而摸不着頭腦，該篇文章介紹Spring MVC參數綁定的幾種方式。

一、JSP頁面向Controller提交參數

1. 簡單類型數據傳遞：
首先介紹jsp頁面向Controller傳遞參數的兩種方式,表單提交和ajax提交請求：
①表單提交（Content-Type默認爲application/x-www-form-urlencoded），jsp和controller代碼如下所示：
注：該方式參數名稱需要和controller參數名稱一致時，請求參數和形參纔會發生綁定。
界面演示：

JSP代碼：
<div>
    <h3>普通表單提交方式傳遞參數</h3>
    <form action="addNameAndAge" method="get">
        <input type='text' name = 'name' placeholder="姓名"/>
        <input type="number" name = 'age' placeholder="年齡"/>
        <input type="submit" value="保存">
    </form>
</div>   
Controller代碼：
@RequestMapping(value = "/addNameAndAge")
    public ModelAndView addNameAndAge(ModelAndView modelAndView,String name, Integer age){
        System.out.println(name + age + "歲了！");
        modelAndView.setViewName("simple_form");
        return modelAndView;
    }
運行結果：張三12歲了！    

GET和POST請求參數區別詳解：

Post請求參數中文亂碼解決方式參考：http://www.jianshu.com/p/435c13cfc769

②Ajax提交表單請求（Content-Type默認爲application/x-www-form-urlencoded； charset=UTF-8），jsp代碼如下，controller代碼與①一致：
注：Ajax參數名稱需要和controller參數名稱一致時，請求參數和形參纔會發生綁定。

<div>
    <h3>AJAX提交</h3>
    <form id="ajaxForm">
        <input type='text' name='name' placeholder="姓名"/>
        <input type="number" name='age' placeholder="年齡"/>
        <!--type由submit改爲button,並添加onclick事件-->
        <input type="button" onclick="addNameAndAge();" value="保存"/>
    </form>
    <span id="ajaxResult"></span>
</div>
<script src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
    function addNameAndAge() {
        $.ajax({
            type: 'post',
            url: '../test/addNameAndAge',
            data: $('#ajaxForm').serialize(),
            success: function (result) {
                $('#ajaxResult').text("保存成功")
            }
        })
    }
</script>

Ajax提交請求的參數如圖所示：
注：(ajax默認 Content-Type爲application/x-www-form-urlencoded; charset=UTF-8)，所以不需要處理字符串亂碼。

2. 簡單POJO進行數據綁定：
注：請求的參數名稱和對象中的屬性名稱一致則將參數值設置在pojo對象中，否則該請求參數將被忽略。

JSP代碼：
<div>
    <h3>簡單POJO進行數據綁定</h3>
    <form action="addUser" method="get">
        <input type='text' name='name' placeholder="姓名"/>
        <input type="number" name='age' placeholder="年齡"/>
        <input type="date" name="birthday" placeholder="出生日期">
        <input type="submit" value="保存">
    </form>
</div>
Controller代碼：
@RequestMapping(value = "/addUser")
    public ModelAndView addUser(ModelAndView modelAndView, User user){
        modelAndView.setViewName("simple_form");
        System.out.println(user.getName() + user.getAge() + "歲了！");
        return modelAndView;
    }
User類：
public class User {
    private String Name;
    private Integer age;
    private Date birthday;
    ....get set方法省略
}
運行結果：張三12歲了！

Spring Mvc不會自動進行日期轉換，需要手動進行日期轉換，參考https://www.cnblogs.com/liuconglin/p/5777879.html
3. 包裝POJO進行數據綁定：
注：當請求參數是多個POJO的組合體時，需要對POJO進行包裝，才能夠將屬性相綁定到對應的POJO上。此時需要將input框name屬性值的格式properties改爲pojo.properties，即包裝POJO中pojo的名稱加上pojo的屬性名。

JSP代碼：
<div>
    <h3>包裝POJO進行數據綁定</h3>
    <form action="addUserVo" method="get">
        <input type='text' name='user.name' placeholder="姓名"/>
        <input type="number" name='user.age' placeholder="年齡"/>
        <input type="date" name="user.birthday" placeholder="出生日期">
        <input type="submit" value="保存">
    </form>
</div>
Controller代碼：
@RequestMapping(value = "/addUserVo")
    public ModelAndView addUserVo(ModelAndView modelAndView, UserVo uerVo){
        modelAndView.setViewName("simple_form");
        User user = uerVo.getUser();
        System.out.println(user.getName() + user.getAge() + "歲了！");
        return modelAndView;
    }
User類：
public class UserVo {
    private User user;
    ....get set方法省略
}
運行結果：張三12歲了！

4. 綁定數組
注：input框name屬性值需要與controller數組名稱一致
界面演示：

JSP代碼：
<div>
    <h3>綁定數組</h3>
    <form action="addArray" method="get">
        <input type='number' name='age' placeholder="年齡1"/>
        <input type="number" name='age' placeholder="年齡2"/>
        <input type="number" name="age" placeholder="年齡3">
        <input type="submit" value="保存">
    </form>
</div>
Controller代碼：
@RequestMapping(value = "/addArray")
    public ModelAndView addArray(ModelAndView modelAndView, Integer[] age){
        modelAndView.setViewName("simple_form");
        for(int i : ages){
            System.out.println(i);
        }
        return modelAndView;
    }
運行結果：1  2  3

參數格式：

5. 綁定集合
注：集合必須使用BeanListModel格式接收才能夠綁定得上，input框name屬性值需要與數組名稱一致，並且需要加上集合下標

JSP代碼：
<div>
    <h3>綁定集合</h3>
    <form action="addList" method="get">
        <input type='number' name='ages[0]' placeholder="年齡1"/>
        <input type="number" name='ages[1]' placeholder="年齡2"/>
        <input type="number" name="ages[2]" placeholder="年齡3">
        <input type="submit" value="保存">
    </form>
</div>
Controller代碼：
@RequestMapping(value = "/addList")
    public ModelAndView addList(ModelAndView modelAndView, UserVo userVo){
        modelAndView.setViewName("simple_form");
        for(int i : userVo.getAges()){
            System.out.println(i);
        }
        return modelAndView;
    }
在UserVo中新增ages參數：
public class UserVo {
    private User user;
    private List<Integer> ages;  
     ....get set方法省略
}  
運行結果：1  2  3       

6. 綁定Map
注：需要在map前面加上@RequestParam參數，jsp的name等都不變

JSP代碼：
<div>
    <h3>綁定Map</h3>
    <form action="addMap" method="get">
        <input type='text' name='name' placeholder="姓名"/>
        <input type="number" name='age' placeholder="年齡"/>
        <input type="submit" value="保存">
    </form>
</div>
Controller代碼：
@RequestMapping(value = "/addMap")
    public ModelAndView addMap(ModelAndView modelAndView,@RequestParam Map<String, Object> map){
        modelAndView.setViewName("simple_form");
        System.out.println(map.get("name").toString() + map.get("age").toString() + "歲了！");
        return modelAndView;
    }
運行結果：張三12歲了！    

7. 綁定JSON
注：請求參數類型需要設置 contentType:’application/json’
界面演示：

JSP代碼：
<div>
    <h3>Json數據交互</h3>
    <form id="jsonForm">
        <input type='text' name='name' placeholder="姓名"/>
        <input type="number" name='age' placeholder="年齡"/>
        <!--type由submit改爲button,並添加onclick事件-->
        <input type="button" onclick="addJson();" value="保存"/>
    </form>
    <span id="jsonResult"></span>
</div>
<script src="/js/jquery-3.1.1.js"></script>
<script type="text/javascript">
    function addJson(){
        var user = {'name':$('#jsonForm').find('input[name="name"]').val(),'age':12};
        $.ajax({
            type: 'post',
            url: '../test/addJson',
            contentType:'application/json;charset=UTF-8',
            dataType:'json',
            data: JSON.stringify(user),
            success: function (result) {
                $('#jsonResult').text(result.name + result.age + "歲了！")
            }
        })
    }
</script>
Controller代碼：
@RequestMapping(value = "/addJson")
    @ResponseBody
    public User addJson(@RequestBody User user){
        System.out.println(user.getName() + user.getAge() + "歲了！");
        return user;
    }
運行結果：張三12歲了！    

測試例子下載：http://download.csdn.net/download/qq_16143915/10153022
轉載請註明出處：http://blog.csdn.net/qq_16143915/article/details/78697436