如何用多个参数在angularjs中发送POST?
我想用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); }
但是,当我发布post时,我得到错误。 任何想法我做错了什么?
var Indata = {param:'val1',.....} $http({ url: "time.php", method: "POST", params: Indata })
客户端
数据需要在对象数组中作为有效载荷分组 – 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"); });
服务器端
创build一个数据传输对象(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
值
这取决于你的后端技术。 如果您的后端技术接受JSON数据。 数据:{ID:1,名称: '姓名',…}
否则,你需要转换你的数据最好的方式来做到这一点创build工厂转换您的数据为id = 1&name = name&…
然后在$ http上定义content-type。 你可以find完整的文章@ 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: 如何在AngularJS中用$ http POST urlencoded表单数据?
!关于encodeURIComponent(obj [p])的重要将以隐含的方式传递对象。 像一个date值将被转换为一个string,如=>'Fri Feb 03 2017 09:56:57 GMT-0700(美国山区标准时间)',我不知道如何parsing它至less在后面 – 结束C#代码。 (我的意思是不需要超过2行的代码),您可以在date情况下使用(angular.isDate,value.toJSON)将其转换为您的后端代码更有意义的格式。
我正在使用这个functioncomunicating我的后端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) } }); };
和波纹pipe代码来使用它…
webrequest.SendUpdateRequest( '/Services/ServeicNameWebService.asmx/Update', $scope.updatedto) .then( (res) => { /*/TODO/*/ }, (err) => { /*/TODO/*/ } );
在后端C#我使用牛顿软件反序列化的数据。
你只能通过post发送1个对象作为参数。 我会改变你的Post方法
public void Post(ICollection<Product> products) { }
并在您的angular码中,您将传递一个JSON符号的产品数组
这是直接的解决scheme:
// 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)。
您也可以在{}
内发送( 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
是三个参数。
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 });
如果你正在使用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; } }
视图:
<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>
var headers = {'SourceFrom':'web'}; restUtil.post(url, params, headers).then(function(response){
您也可以在{}
内发送(POST)
多个参数并添加它。