解决angular的$http.post()提交数据时后台接收不到参数值问题的方法


Posted in Javascript onDecember 10, 2015

写此文的背景:在学习使用angular的$http.post()提交数据时,后台接收不到参数值,于是查阅了相关资料,寻找解决办法。

写此文的目的:通过上面提到的文章中的解决之道,结合自己的经验,总结了如下发现。
前端:html,jquery,angular
后端:java,springmvc
一、平常使用的post提交和接收方式
前端使用jquery提交数据。

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',  
  data:{"name":"jquery","password":"pwd"},
  dataType:'json',
  success:function(data){
    //...
  }
});

后端java接收:

@Controller
public class UserController {
  @ResponseBody
  @RequestMapping(value="/loginForm",method=RequestMethod.POST)
  public User loginPost(User user){
    System.out.println("username:"+user.getName());
    System.out.println("password:"+user.getPassword());
    return user;
  }
}
model(不要忘记get、set方法):
public class User {
  private String name;
  private String password;
  private int age;
  
  //setter getter method

}

后台打印:

username:jquery
password:pwd

调用接口查看到的前端返回结果:

解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

二、使用angularJs的post方法提交

<div ng-app="myApp" ng-controller="formCtrl">
 <form novalidate>
 UserName:<br>
 <input type="text" ng-model="user.username"><br>
 PassWord:<br>
 <input type="text" ng-model="user.pwd">
 <br><br>
 <button ng-click="login()">登录</button>
 </form>
</div>

js代码:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
 $scope.login = function() {
  $http({
   url:'/carlt/loginForm',
   method: 'POST',   
   data: {name:'angular',password:'333',age:1}  
  }).success(function(){
   console.log("success!");
  }).error(function(){
   console.log("error");
  })
 };
});

后台打印结果:

username:null
password:null:

查看前端:

解决angular的$http.post()提交数据时后台接收不到参数值问题的方法

三、解决angular提交post问题。
相信看过上面提到的哪怕文章的人已经知道怎么解决问题了吧。文中是更改了angular的提交方式,使得angular的提交数据方式更像jquery的。

我试过,也是行得通的。然后我又试了另外一种方式。如下:

前端不变,依然是:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope,$http) {
  $scope.login = function() {
    $http({
      url:'/carlt/loginForm',
      method: 'POST',      
      data: {name:'angular',password:'333',age:1}   
    }).success(function(){
      console.log("success!");
    }).error(function(){
      console.log("error");
    })
  };
});

后台变了,只是在User前加上@RequstBody,因为angular提交的是json对象:

@Controller
public class UserController {
  @ResponseBody
  @RequestMapping(value="/loginForm",method=RequestMethod.POST)
  public User loginPost(@RequestBody User user){
    System.out.println("username:"+user.getName());
    System.out.println("password:"+user.getPassword());
    return user;
  }
}
@RequestBody

作用:

      i) 该注解用于读取Request请求的body部分数据,使用系统默认配置的HttpMessageConverter进行解析,然后把相应的数据绑定到要返回的对象上;

      ii) 再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上。

使用时机:

A) GET、POST方式提时, 根据request header Content-Type的值来判断:

    application/x-www-form-urlencoded, 可选(即非必须,因为这种情况的数据@RequestParam, @ModelAttribute也可以处理,当然@RequestBody也能处理);
    multipart/form-data, 不能处理(即使用@RequestBody不能处理这种格式的数据);
    其他格式, 必须(其他格式包括application/json, application/xml等。这些格式的数据,必须使用@RequestBody来处理);
B) PUT方式提交时,根据request header Content-Type的值来判断:

    application/x-www-form-urlencoded, 必须;
    multipart/form-data, 不能处理;
    其他格式,必须;
说明:request的body部分的数据编码格式由header部分的Content-Type指定;

四、解决了angular问题之后,发现jquery按照原来的方式提交post请求会报错(错误码415)。

如下方式可以解决jquery提交问题:

$.ajax({
  url:'/carlt/loginForm',
  method: 'POST',
  contentType:'application/json;charset=UTF-8',
  data:JSON.stringify({"name":"jquery","password":"pwd"}),
  dataType:'json',
  success:function(data){
    //...
  }
});

json对象转json字符串:JSON.stringify(jsonObj);

以上就是本文的全部内容,有兴趣的同学可以试试其它方法,希望本文可以解决大家遇到的angular的post提交问题。

Javascript 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
javascript简单链式调用案例分析
May 10 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
Nov 15 Javascript
js代码实现轮播图
May 04 Javascript
Angular短信模板校验代码
Sep 23 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
原生js实现数字字母混合验证码的简单实例
Dec 10 #Javascript
js实现新年倒计时效果
Dec 10 #Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 #Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 #Javascript
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
You might like
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
PHP文件操作实例总结
2016/09/27 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
jquery实现动态画圆
2014/12/04 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Python translator使用实例
2008/09/06 Python
Python简易版图书管理系统
2019/08/12 Python
Python远程方法调用实现过程解析
2020/07/28 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
通用C#笔试题附答案
2016/11/26 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
还款承诺书范文
2014/05/20 职场文书
设计大赛策划方案
2014/06/13 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
具结保证书范本
2015/05/11 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python