当前位置:小鱼儿玄机二站 > 关于计算机 > 付给数据时后台接受不到参数值问题的措施

付给数据时后台接受不到参数值问题的措施

文章作者:关于计算机 上传时间:2019-09-03

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

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值:

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

@RequestMapping(method = RequestMethod.POST)
  @ResponseBody
  public Map<String, Object> save(
      @RequestParam(value = "isform", required = false) String isform) {
    System.out.println("isform value: " + isform);
    return null;

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

前台页面发送一个post提交表单的请求

后端java接收:

小鱼儿论坛高手 1

@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

}

发现后台没有取到值

后台打印:

小鱼儿论坛高手 2

username:jquery
password:pwd

小鱼儿玄机二站,后边我想到的第一种方案是在控制器方法参数里加requestbody来接收json参数,改成如下:

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

@RequestMapping(method = RequestMethod.POST)
  @ResponseBody
  public Map<String, Object> save(
      @RequestParam(value = "isform", required = false) @RequestBody String isform) {
    System.out.println("isform value: " + isform);
    return null;

  }

小鱼儿论坛高手 3

但是isform的值结果还是为null,
接着我又对比了下以前的项目中,接收post请求的参数,发现一个有趣的现象,

二、使用angularJs的post方法提交

下边是Angular的默认请求头:

<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>

$httpProvider.defaults.headers.post: (header defaults for POST requests)

js代码:

Content-Type: application/json

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");
  })
 };
});

$httpProvider.defaults.headers.put(header defaults for PUT requests)

后台打印结果:

Content-Type: application/json

username:null
小鱼儿心水论免费开奖,password:null:

其中Angular的post和put都是application/json,

查看前端:

而jquery的post请求的"Content-Type"默认为" application/x-www-form-urlencoded",于是我更改了angular的默认Content-Type,

小鱼儿论坛高手 4

app.config(function($httpProvider) {
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

});

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

接下来的请求body变成了这样,但是后边还是没有取到isform的值,

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

小鱼儿论坛高手 5

前端不变,依然是:

又查了半天,在一个老外的博客上发现了原因: By default, jQuery transmits data using Content-Type: x-www-form-urlencoded and the familiar foo=bar&baz=moe serialization. AngularJS, however, transmits data using Content-Type: application/json and { "foo": "bar", "baz": "moe" } JSON serialization
自己翻译了:

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");
    })
  };
});

默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencodedand和类似于"foo=bar&baz=moe"的序列,然而AngularJS,传输数据使用Content-Type: application/json和{ "foo": "bar", "baz": "moe" }这样的json序列。

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

所以下把Content-Type设置成x-www-form-urlencodedand之后,还需要转换序列的格式,

@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

下边是我经过老外实践而自己测试过的最终方案:

作用:

app.config(function($httpProvider) {
  $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

  // Override $http service's default transformRequest
  $httpProvider.defaults.transformRequest = [function(data) {
    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function(obj) {
      var query = '';
      var name, value, fullSubName, subName, subValue, innerObj, i;

      for (name in obj) {
        value = obj[name];

        if (value instanceof Array) {
          for (i = 0; i < value.length; ++i) {
            subValue = value[i];
            fullSubName = name + '[' + i + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        } else if (value instanceof Object) {
          for (subName in value) {
            subValue = value[subName];
            fullSubName = name + '[' + subName + ']';
            innerObj = {};
            innerObj[fullSubName] = subValue;
            query += param(innerObj) + '&';
          }
        } else if (value !== undefined && value !== null) {
          query += encodeURIComponent(name) + '='
              + encodeURIComponent(value) + '&';
        }
      }

      return query.length ? query.substr(0, query.length - 1) : query;
    };

    return angular.isObject(data) && String(data) !== '[object File]'
        ? param(data)
        : data;
  }];
});

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

在angular模块中添加以上代码,我们来看下效果:

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

小鱼儿论坛高手 6

使用时机:

发现与jquery的post请求风格一致了,有木有!!!

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的值来判断:

 小鱼儿论坛高手 7

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

isform已经可以正常接收到参数了,大功告成!

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

以上就是angular的post请求后台接收参数为null的解决方案,希望对大家的学习有所帮助。

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

您可能感兴趣的文章:

  • 详解SpringMVC——接收请求参数和页面传参
  • spring mvc中的@PathVariable获得请求url中的动态参数
  • 学习SpringMVC——如何获取请求参数详解
  • axios发送post请求springMVC接收不到参数的解决方法
  • Spring3 MVC请求参数获取的几种方法小结
  • 快速解决SpringMVC @RequestBody 用map接收请求参数的问题
  • Spring MVC请求参数接收的全面总结教程
  • Spring MVC请求参数与响应结果全局加密和解密详解
$.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提交问题。

您可能感兴趣的文章:

  • AngularJs解决跨域问题案例详解(简单方法)
  • 总结十个Angular.js由浅入深的面试问题
  • 解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
  • angularjs在ng-repeat中使用ng-model遇到的问题
  • AngularJS页面访问时出现页面闪烁问题的解决
  • AngularJS上拉加载问题解决方法
  • 给angular加上动画效遇到的问题总结
  • Angular 页面跳转时传参问题
  • AngularJS模块管理问题的非常规处理方法
  • angular十大常见问题

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:付给数据时后台接受不到参数值问题的措施

关键词: