如何用多個參數在angularjs中發送POST？

Question

我想使用angularjs HTTP post服務發送多個參數。

下面是客戶端代碼：

$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

var Indata = {param:'val1',.....} 
    $http({ 
    url: "time.php", 
    method: "POST", 
    params: Indata 
    }) 

Answer 2

您只能通過發佈在主體中發送1個對象作爲參數。我想發表你的方法改爲

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

，並在你的角度代碼，你會錯過JSON表示法，產品陣列

Answer 3

客戶端

數據需要一個對象數組中進行分組作爲有效載荷 - 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 4

這裏是直接的解決方案：

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

然後發送prod在體內（如balla）。內{}並添加

Answer 5

var name = $scope.username; 
var pwd = $scope.password; 

var req = { 
    method: 'POST', 
    url: '../Account/LoginAccount', 
    headers: { 
     'Content-Type': undefined 
    }, 
    params: { username: name, password: pwd } 
} 

$http(req).then(function (responce) { 
    // success function 
}, function (responce) { 
    // Failure Function 
}); 

Answer 6

您還可以發送（POST）多PARAMS。

實施例：

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

如果你使用ASP.NET MVC和Web API的機會，你有牛頓軟件。JSON NuGet包installed.This庫中有一個名爲JObject類，它可以讓你通過多個參數：

阿比控制器：

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

查看：

<script src="~/Scripts/angular.js"></script> 
<script type="text/javascript"> 
    var myApp = angular.module("app", []); 
    myApp.controller('controller', function ($scope, $http) { 

     $scope.AddProducts = function() { 
      var product = { 
       ProductID: 0, 
       ProductName: "Orange", 
      } 

      var product2 = { 
       ProductID: 1, 
       ProductName: "Mango", 
      } 

      var data = { 
       product: product, 
       product2: product2, 
       randomNumber:12345 
      }; 

      $http.post("/api/Product", data). 
      success(function (data, status, headers, config) { 
      }). 
      error(function (data, status, headers, config) { 
       alert("An error occurred during the AJAX request"); 
      }); 
     } 
    }); 
</script> 
<div ng-app="app" ng-controller="controller"> 
    <input type="button" ng-click="AddProducts()" value="Get Full Name" /> 
</div> 

Answer 8

這取決於關於你的後端技術。 如果您的後端技術接受JSON數據。 數據：{ID：1，名稱： '姓名'，...}

否則，您必須對您的數據最好的方式轉換爲做到這一點創建工廠將數據轉換爲 ID = 1 & name = name & ...

然後在$ http上定義content-type。 你可以找到完整的文章@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() {}); 

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

重要 約encodeURIComponent方法（OBJ [P]）將轉讓對象含蓄的方式！就像一個日期值將被轉換爲一個字符串，如=>'Fri Feb 03 2017 09:56:57 GMT-0700（美國山區標準時間）'，我不知道如何解析它至少在後面 - 結束C＃代碼。 （我的意思是代碼不需要超過2行） 您可以在日期情況下使用（angular.isDate，value.toJSON）將其轉換爲您的後端代碼更有意義的格式。

我使用這個功能來comunicating到我的後端web服務...

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 9

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

您還可以發送內{}(POST)多個PARAMS和添加。