1. 程式人生 > 實用技巧 >2.html和css進階

2.html和css進階

在使用ajax傳送請求時,如果傳送的JSON資料是一個類中的不同屬性,在Controller方法中使用@RequestBody會直接封裝進該類中

例如:

前端部分程式碼

JavaScript

 1 <script language="JavaScript">
 2     function login(){
 3         var user_name = $("#user_name").val();                     //使用者名稱
 4         var user_password = $("#user_password").val;            //
使用者密碼 5 6 $.ajax({ 7 url:"<%=path%>/User/Login", 8 type:"POST", 9 async: false, 10 contentType:"application/json;charset=UTF-8", 11 dataType:'json', 12 data:JSON.stringify({"user_name":user_name,"user_password":user_password}), //
將JSON物件轉為字串 13 success:function(data){ 14 15 } 16 }); 17 } 18 </script>

form表單

 1 <form>
 2     <div class="form-group">
 3         <label for="user_name" stype="display:inline;">使用者名稱:</label>
 4         <input id="user_name" type
="text" class="form-control" style="display:inline;" autocomplete="off" /> 5 </div> 6 <div class="form-group"> 7 <label for="user_password" style="display:inline;">使用者密碼:</label> 8 <input id="user_password" type="text" class="form-control" style="display:inline;" autocomplete="off" /> 9 </div> 10 <div class="col"> 11 <div class="col-md-4" style="text-align: right;"> 12 <button type="submit" class="btn btn-success" onclick="login()">登入</button> 13 </div> 14 </div> 15 </form>

此時前端向後端傳入JSON資料

User類部分程式碼

1 public class User implements Serializable {
2     private Integer user_name;                       //使用者名稱
3     private String user_password;                   //使用者密碼
4     ......   
5 }

Controller部分程式碼

 1 @Controller
 2 @RequestMapping("/User")
 3 public class UserController {
 4 
 5     @RequestMapping(value = "/Login",method = {RequestMethod.POST})
 6     public @ResponseBody Boolean Login(@RequestBody User user) {
 7         //此時user.getUser_name()就是前端的user_name
 8         //user.getUser_password()就是前端的user_password
 9         //根據輸入的使用者名稱及使用者密碼和資料庫對比判斷是否登入成功,並返回一個布林值告訴前端
10         ······
11         return true/false;
12     }

如果此時ajax提交的JSON資料為

1 data:JSON.stringify({"user_name":admin,"user_password":123)

在Controller內加入輸出語句

1 public @ResponseBody Boolean Login(@RequestBody User user) {
2     System.out.println(user.getUser_name());
3     System.out.println(user.getUser_password());
4     ······
5     return true/false;
6 }

輸出的結果為

1 admin
2 123

但是,如果我們需要同時接收多個引數,但這些引數並不是同一個類的不同屬性,應該如何處理呢?

例如:

form表單中增加了一項驗證碼:verifycode。此時,假如ajax提交的JSON資料為

1 data:JSON.stringify({"user_name":admin,"user_password":123,"verifycode":666})

但是verifycode並不是User類中的屬性,不能由@RequestBody User user接收

如果採用String接收,輸出的將是JSON字串

1 @RequestMapping(value = "/Login",method = {RequestMethod.POST})
2     public @ResponseBody Boolean Login(@RequestBody String body) {
3         //此時body是整個請求體的內容
4         System.out.println(body);
5         //······
6     }

輸出的結果為

1 {"user_name":admin,"user_password":123,"verifycode":666}

但我們想拿到每個引數的對應值,此時可以採用Map<String,String>接收

 1 @RequestMapping(value = "/Login",method = {RequestMethod.POST})
 2     public @ResponseBody Boolean Login(@RequestBody Map<String,String> map) {
 3         //此時map.get("user_name")就是前端的user_name
 4         System.out.println(map.get("user_name"));
 5         //map.get("user_password")就是前端的user_password
 6         System.out.println(map.get("user_password"));
 7         //map.get("verifycode")就是前端的verifycode
 8         System.out.println(map.get("verifycode"));
 9         ······
10     }

輸出的結果為

1 admin
2 123
3 666