web-dev-qa-db-fra.com

Comment envoyer POST dans angularjs avec plusieurs params?

Je veux envoyer plusieurs paramètres en utilisant le service de messagerie HTTP angularjs.

Voici le code côté client:

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

Voici le code côté serveur:

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

Mais quand je fais le post, je reçois une erreur . Une idée de ce que je fais mal?

angularjs
34
Michael

Envisager une url de publication avec les paramètres utilisateur et email

objet params sera

 var data = {user:'john', email:'[email protected]'};
    $http({
      url: "login.php",
      method: "POST",
      params: data
    })
29
zloctb

Côté client

Les données doivent être regroupées dans un tableau d'objets en tant que données utiles: Indata:

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

Passez le payload à travers $http.post comme deuxième argument:

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

Du côté serveur  

Créez une classe d'objet de transfert de données (DTO) en tant que telle:

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

La classe ci-dessous accepte DTO avec les mêmes noms de propriété que ceux contenus dans la charge utile.

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

Dans la classe ci-dessus, request contient 2 propriétés avec les valeurs de product et product2

38
Sajal

Tout dépend de votre technologie backend ... Si votre technologie backend accepte les données JSON .data: {id: 1, nom: 'nom', ...}

sinon, vous devez convertir vos données comme le meilleur moyen de créer Factory pour convertir vos données en id = 1 & name = name & ...

puis sur $ http définir le type de contenu . vous pouvez trouver l'article complet @ 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: Comment puis-je POST coder les données de formulaire avec $ http dans AngularJS?

! important about encodeURIComponent (obj [p]) transférera l'objet de manière implicite. comme une valeur de date sera convertie en une chaîne comme => 'Vendredi 03 février 2017 09:56:57 GMT-0700 (heure normale des Rocheuses des États-Unis)' et je n'ai aucune idée de la façon dont vous pouvez l'analyser au moins à l'arrière -end le code C #. (Je veux dire un code ne nécessitant pas plus de 2 lignes) Vous pouvez utiliser (angular.isDate, value.toJSON) dans le cas de la date pour le convertir en un format plus significatif pour votre code back-end.

J'utilise cette fonction pour communiquer avec mes services Web dorsaux ...

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

et le code ci-dessous pour l'utiliser ...

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

dans backend C #, j'utilise newtonsoft pour désérialiser les données.

6
Navid Golforoushan

Si vous utilisez ASP.NET MVC et l'API Web, le package Newtonsoft.Json NuGet est installé. Cette bibliothèque a une classe appelée JOBbject qui vous permet de transmettre plusieurs paramètres:

Contrôleur 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; }
}

Vue:

<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>
4
Denys Wessels

Vous ne pouvez envoyer qu'un seul objet en tant que paramètre dans le corps par la poste. Je voudrais changer votre méthode Post à

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

et dans votre code angulaire, vous laissez passer un tableau de produits en notation JSON

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

Vous pouvez également envoyer (POST) plusieurs paramètres dans {} et l'ajouter.

1
Rajesh Pandhare

Vous pouvez également envoyer (POST) plusieurs paramètres dans {} et les ajouter.

Exemple:

$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) {
});

où employeeId, bType (Badge Catégorie) et badge sont trois paramètres.

0
Md. Nahiduzzaman Rose

ajoutez le transformRequest comme ci-dessous pour envoyer plusieurs paramètres au backend 

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");
            });
0
vamsi nirala
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
});
0
Ramu Vemula

Voici la solution directe:

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

Si vous êtes sain d'esprit, faites ceci:

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

Et ensuite envoyer des produits dans le corps (comme un balla). 

0
VSO