@ResponseBody和@RequestBody使用 案例

本文主要介绍通过ajax提交表单后,@ResponseBody和@RequestBody的使用。

UserVo 
public class UserVo {
private int userID;
private String userName;
private String password;
private String phone;
private String email;
private Date birthday;
private int gender;
public UserVo(){
}
public int getUserID() {
return userID;
}
public void setUserID(int userID) {
this.userID = userID;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
//表单提交的数据,转换成bean
@DateTimeFormat(pattern="yyyy-MM-dd")
// JSON转换格式设置日期
@JsonFormat(pattern="yyyy-MM-dd")
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public int getGender() {
return gender;
}
public void setGender(int gender) {
this.gender = gender;
}
@Override
public String toString() {
return this.getUserID()+"  "+this.getUserName()+"  "+this.getBirthday()+"...";
}
}



UserController

@Controller
@RequestMapping("user")

public class UserController {

private List<UserVo> userList =new ArrayList<UserVo>();
public UserController() {
for (int i = 1; i <=5; i++) {
UserVo uv = new UserVo();
uv.setUserID(i);
uv.setUserName("user"+i);
uv.setGender(i%2);
uv.setPhone("1380013800"+i);
uv.setEmail("email@12"+i+".com");
uv.setBirthday(new Date(90, 2, 23));
uv.setPassword("123456");
userList.add(uv);
}
}
@RequestMapping("getUsers.do")
@ResponseBody
public List<UserVo> getUsers(){
return userList;
}

/**
* 以POST提交方式,添加一个新用户
* @param vo
* @return
*/
@RequestMapping(value="addUser.do", method=RequestMethod.POST,consumes = "application/json")
@ResponseBody
public int addUser(@RequestBody UserVo vo){
System.out.println(vo);
userList.add(vo);
return 1;
}

}


index.html

<!DOCTYPE html>  

<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <a href="user/getUsers.do">查看所有用户</a>  
    <a href="insert.html">添加用户</a>  
</body>  

</html>  


insert.html

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Store</title>  
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>  
<script type="text/javascript">  
  
function addUser() {  
       var name = $("#userName").val();  
       var password = $("#password").val();  
       var email = $("#email").val();  
       var phone = $("#phone").val();  
       var gender = $("#gender").val();  
       var birthday = $("#birthday").val();  
  
       var sendInfo = {  
               userName: name,  
               password: password,  
               email: email,  
               phone: phone,  
               gender: gender,  
               birthday: birthday,  
       };  
  
       $.ajax({  
           type: "POST",  
           url: "user/addUser.do",  
           contentType : 'application/json',  //默认值: "application/x-www-form-urlencoded",发送信息至服务器时内容编码类型。  
           dataType: "json",//预期服务器返回的数据类型  
           success: function (msg) {  
               if (msg) {  
                   alert(name + " was added in list !");  
               } else {  
                   alert("Cannot add to list !");  
               }  
           },error:function(msg){  
               alert("failed");  
           },  
  
           data: JSON.stringify(sendInfo)  
       });  
}  
</script>  
</head>  
<body>  
    Post 提交  
    <form action="" method="post">  
        userName:<input type="text" id ="userName" value="david"/><br>  
        password:<input type="text" id ="password" value="111111"/><br>  
        email:<input type="text" id ="email" value="david@etc.com"/><br>  
        phone:<input type="text" id ="phone" value="13800138002"/><br>  
        gender:<input type="text" id ="gender" value="1"><br>  
        birthday:<input type="text" id ="birthday" value="1990-06-30"><br>  
        <input type="button" value="OK" οnclick="addUser()"/>  
    </form>  
</body>  

</html> 

四、效果图

4.1查看所有用户


4.2添加用户


总结

      1、ResponseBody 返回的是接送数据---查看所有用户

      2、RequestBody  组装json字符串返回到后台,json格式和javabean格式最好保持一致,不需要再进行json解析

                

             


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值