Ionic向ASP.NET Web API POST请求传值为空问题求助

这问题我做项目时也踩过坑，核心原因就是请求的Content-Type和发送的数据格式不匹配，导致后端没法正确解析你传的参数！

为什么会出现传值为空？ #

你设置了请求头Content-Type: application/x-www-form-urlencoded，但data字段传的是一个JSON对象：{ firstName : "a", lastName : "b", email : "ab@ab.com" }。

这种Content-Type要求发送的数据必须是URL编码的键值对字符串（比如firstName=a&lastName=b&email=ab@ab.com），而不是JSON格式。后端按照x-www-form-urlencoded的规则去解析，自然找不到对应参数，就返回null了。

两种解决方案任你选 #

方案一：把JSON数据转换成URL编码格式 #

AngularJS（Ionic基于它开发）提供了$httpParamSerializer工具，可以帮你把JSON对象转换成符合要求的键值对字符串。修改代码如下：

// 记得在控制器里注入$httpParamSerializer哦
$http({
  url: 'http://localhost:1449/api/IonicApi',
  method: "POST",
  data: $httpParamSerializer({ firstName : "a", lastName : "b", email : "ab@ab.com" }),
  headers: { 'Content-Type': "application/x-www-form-urlencoded; charset=UTF-8" }
}).then(function (response) {
  // success逻辑
  $ionicPopup.alert({
    title: 'Your Name is '+$scope.man.firstName + ' '+$scope.man.lastName,
    template: 'It might taste good'
  })
}, function (response) {
  // 错误处理逻辑
});

方案二：改用JSON格式传递参数（更推荐） #

现在大部分Web API都支持JSON格式，这种方式更直观也更通用。你只需要修改请求头的Content-Type为application/json，不用转换数据：

$http({
  url: 'http://localhost:1449/api/IonicApi',
  method: "POST",
  data: { firstName : "a", lastName : "b", email : "ab@ab.com" },
  headers: { 'Content-Type': "application/json; charset=UTF-8" }
}).then(function (response) {
  // success逻辑
  $ionicPopup.alert({
    title: 'Your Name is '+$scope.man.firstName + ' '+$scope.man.lastName,
    template: 'It might taste good'
  })
}, function (response) {
  // 错误处理逻辑
});

注意：如果用这个方案，后端也要对应支持JSON解析。比如ASP.NET Web API的话，控制器方法可以直接接收模型类（框架会自动解析JSON），或者用[FromBody]标记参数。

内容的提问来源于stack exchange，提问作者Newaz Sharif