Question

我想使用angularjs HTTP post service发送多个参数。

这是客户端代码：

$http.post("http://localhost:53263/api/Products/", [$scope.product, $scope.product2]).
        then(function (data, status, headers, config) { alert("success") },
             function (data, status, headers, config) { alert("error") });

这是服务器端代码：

// POST api/<controller>
public void Post([FromBody]Product product,[FromBody]Product product2)
{
    var productRepository = new ProductRepository();
    var newProduct = productRepository.Save(product);
}

但是当我发帖时，我得到了错误。知道我做错了吗？

Answer 1

客户端

数据需要在对象数组中作为有效负载进行分组 - Indata：

var Indata = {'product': $scope.product, 'product2': $scope.product2 };

将有效负载通过$http.post作为第二个参数：

$http.post("http://localhost:53263/api/Products/", Indata).then(function (data, status, headers, config) { 
    alert("success"); 
},function (data, status, headers, config) { 
    alert("error"); 
});

服务器端

创建数据传输对象（DTO）类：

public class ExampleRequest {
   public string product {get; set;};
   public string product2 {get; set;};
}

下面的类接受DTO，其具有与有效负载相同的属性名称。

public void Post(ExampleRequest request)
{
    var productRepository = new ProductRepository();
    var newProduct = productRepository.Save(request.product);
}

在上述课程中，request包含2个属性，其值为product和product2

Answer 2

考虑使用参数用户和电子邮件

的帖子网址

params对象将是

 var data = {user:'john', email:'john@email.com'};
    $http({
      url: "login.php",
      method: "POST",
      params: data
    })

Answer 3

这取决于您的后端技术。如果您的后端技术接受JSON数据。的数据：{ID：1，名称： '名称'，...}

否则，您需要转换数据的最佳方式来创建Factory以将数据转换为的 ID = 1＆安培;名称=名＆安培; ...

然后在$ http定义内容类型。你可以找到完整的文章@ https://www.bennadel.com/blog/2615-posting-form-data-with-http-in-angularjs.htm

$http({ method: 'POST', url: url, headers: {'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function(obj) { var str = []; for(var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); }, data: {username: $scope.userName, password: $scope.password} }).success(function () {});

REF：How do I POST urlencoded form data with $http in AngularJS?

！重要 关于encodeURIComponent（obj [p]）将以隐式的方式传递对象。比如日期值将被转换为类似=＆gt;'星期五2017年3月3日09:56:57 GMT-0700（美国山地标准时间）'的字符串，我不知道如何解析它至少在后端C＃代码。（我的意思是代码不需要超过2行）你可以在日期的情况下使用（angular.isDate，value.toJSON）将它转换为更有意义的后端代码格式。

我正在使用此功能与我的后端网络服务进行通信...

this.SendUpdateRequest = (url, data) => { return $http({ method: 'POST', url: url, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: function (obj) { return jsontoqs(obj); }, data: { jsonstring: JSON.stringify(data) } }); };

和下面的代码使用它......

webrequest.SendUpdateRequest( '/Services/ServeicNameWebService.asmx/Update', $scope.updatedto) .then( (res) => { /*/TODO/*/ }, (err) => { /*/TODO/*/ } );

在后端C＃中我使用newtonsoft来反序列化数据。

Answer 4

如果你正在使用ASP.NET MVC和Web API，你可能已经安装了Newtonsoft.Json NuGet包。这个库有一个名为JObject的类，它允许你传递多个参数：

Api控制器：

public class ProductController : ApiController
{
    [HttpPost]
    public void Post(Newtonsoft.Json.Linq.JObject data)
    {
        System.Diagnostics.Debugger.Break();

        Product product = data["product"].ToObject<Product>();
        Product product2 = data["product2"].ToObject<Product>();

        int someRandomNumber = data["randomNumber"].ToObject<int>();
        string productName = product.ProductName;
        string product2Name = product2.ProductName;
    }
}

public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
}

查看：

Answer 5

您只能通过邮寄在身体中发送1个对象作为参数。我会将你的Post方法更改为

public void Post(ICollection<Product> products)
{
}

在您的角度代码中，您将以JSON表示法传递产品数组

Answer 6

  var headers = {'SourceFrom':'web'};
  restUtil.post(url, params, headers).then(function(response){

您还可以在(POST)中发送{}多个参数并添加它。

Answer 7

以下是直接解决方案：

// POST api/<controller>
[HttpPost, Route("postproducts/{product1}/{product2}")]
public void PostProducts([FromUri]Product product, Product product2)
{
    Product productOne = product; 
    Product productTwo = product2; 
}

$scope.url = 'http://localhost:53263/api/Products/' +
                 $scope.product + '/' + $scope.product2
$http.post($scope.url)
    .success(function(response) {
        alert("success") 
    })
    .error(function() { alert("fail") });
};

如果你是理智的，你可以这样做：

var $scope.products.product1 = product1;
var $scope.products.product2 = product2;

然后在身体中发送产品（如balla）。

Answer 8

您还可以在POST内发送（{}）多个参数并添加。

示例：

$http.post(config.url+'/api/assign-badge/', {employeeId:emp_ID,bType:selectedCat,badge:selectedBadge})
    .then(function(response) {
        NotificationService.displayNotification('Info', 'Successfully Assigned!', true);
    }, function(response) {
});

其中employeeId，bType（徽章分类）和badge是三个参数。

Answer 9

添加如下所示的transformRequest以向后端发送多个参数

var jq = jQuery.noConflict();
            var transform = function(data) {
                return jq.param(data);
            };
            var config = {
                headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },transformRequest: transform
            };

      var params={
            blogPostJson:JSON.stringify($scope.blogPost),
            publish:$scope.blogPost.active
        };
        var url = "${createLink(controller : 'cms', action : 'saveBlog')}";
            $http.post(url,params, config).then(function onSuccess(response) {
                var data = response.data;
               // var status = response.status;
                if (data.error) {
                    alert('error :' + data.error);
                } else {
                  //  alert('Success');

                }

            }).catch(function onError(response) {
                //console.log ("Unable to save Alcohol information");
            });

Answer 10

import { HttpParams} from "@angular/common/http";
let Params= new HttpParams();
Params= Params.append('variableName1',variableValue1);
Params= Params.append('variableName2',variableValue2);

http.post<returnType>('api/yourApiLocation',variableValue0,{headers, params: Params})

如何在具有多个参数的angularjs中发送POST？

10 个答案: