解决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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
Vue中computed和watch有哪些区别
Dec 19 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 Rename 更改文件、文件夹名称
2011/05/24 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
浅谈javascript中的作用域
2012/04/07 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
python正则表达式的使用
2017/06/12 Python
Python正则表达式常用函数总结
2017/06/24 Python
django之session与分页(实例讲解)
2017/11/13 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
北京SQL新华信咨询
2016/09/30 面试题
2019年新郎保证书3篇
2019/10/17 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
SpringBoot详解执行过程
2022/07/15 Java/Android