前后端对应接口及前端ajax数据格式

Posted 2021-01-12 晓梦云飞

1.如果前端这么写post请求
$.ajax({
  url: this.apiUrl + "/register.do",
  type: "POST",
  data:{
    "username":this.user.username,
   "email":this.user.email,
   "telphone":this.user.telphone,
   "address":this.user.address,
   "password":this.user.password,
   "image":‘/images/3846f125f0524459a284cf970493c077xzq.jpg‘
},
dataType:"json",
success:function(data){
alert("注册用户成功!");
}
});

//Java后端这样写即可
@RequestMapping(value={"/register"}, method={org.springframework.web.bind.annotation.RequestMethod.POST})
@ResponseBody
public Map<String, Object> user_register(User user,HttpServletRequest request,HttpServletResponse response){
user.setPassword(user.getPassword());
userService.addUser(user);
Map<String, Object> item =new HashMap<String, Object>();
item.put("msg", "success");
return item;
}

而PUT请求却需要这样写，后台才能接受到参数。（暂时不知到为什么）
var usertemplate={ id:1, username: ‘‘,address: ‘‘,telphone: ‘‘,email:‘‘, image: ‘‘};
$.ajax({
  url: this.apiUrl + "/modify.do",
  type: "PUT",
  data:JSON.stringify(this.usertemplate),
  dataType:"json",
  contentType:"application/json",
  success:function(data){
     alert("修改用户成功!");
    alert(this.user.id);
  }
});

//修改用户信息(PUT方式)
@RequestMapping(value={"/modify"}, method={org.springframework.web.bind.annotation.RequestMethod.PUT})
@ResponseBody
public Map<String, Object> user_modify(@RequestBody User user,HttpServletRequest request,HttpServletResponse response){
userService.updateUser(user);
Map<String, Object> item =new HashMap<String, Object>();
item.put("msg", "success");
return item;
}

2.如果这样写
var user={ id:1, username: ‘‘,address: ‘‘,telphone: ‘‘,email:‘‘, image: ‘‘ };
$.ajax({
url:this.restApiUrl + "/user.do",
type: "POST",
data:JSON.stringify(user),
dataType:"json",
contentType:"application/json",
success:function(data){
alert("注册用户成功!");
}
});

//Java后端这样写即可
@RequestMapping(value={"/user"}, method={org.springframework.web.bind.annotation.RequestMethod.POST})
@ResponseBody
public Map<String, Object> user_register(@RequestBody User user,HttpServletRequest request,HttpServletResponse response){
userService.addUser(user);
Map<String, Object> item =new HashMap<String, Object>();
item.put("msg", "success");
return item;
}

注:相对于angular和vue的post和put必须采用第二种写法使用注解@RequestBody,否则无法接受到传过来的对象。

this.user={ id:1, username: ‘‘,address: ‘‘,telphone: ‘‘,email:‘‘, image: ‘‘ };

vue:
this.$http.post(this.apiUrl + ‘/user.do‘,this.user).then((response) => {
this.queryAllUser();
});

angular:

var user={ id:1, username: ‘‘,address: ‘‘,telphone: ‘‘,email:‘‘, image: ‘‘ };
$http.post(this.apiUrl + ‘/user.do‘,user).success(function(data) {
console.log(data);
}).error(function(err) {
//错误代码
});


3.意外看到这种写法
<script type="text/javascript">
$(document).ready(function(){
var userDataArry=[];
var user1=={"username":"admin","address":"hubei"};
var user2={"username":"root","address":"hunan"};
userDataArry.push(user1);
userDataArry.push(user2);
$.ajax({
type:"POST",
url:"user/saveUser",
dataType:"json",
contentType:"application/json",
data:JSON.stringify(userDataArry),
success:function(data){

}
});
});
</script>

//Java后端这样写即可
@RequestMapping(value = "saveUser", method = {RequestMethod.POST }})
@ResponseBody
public void saveUser(@RequestBody List<User> users) {
userService.batchSave(users);
}