POST를 angularj로 전송하려면 어떻게 해야 하나요?

POST를 angularj로 전송하려면 어떻게 해야 하나요?

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

하지만 게시물을 만들 때 오류가 발생합니다.내가 뭘 잘못하고 있는지 알기나 해?

클라이언트 측

데이터는 개체 배열에서 payload로 그룹화해야 합니다.Indata:

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

payload를 통과시키다$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"); 
});

서버측

다음과 같이 Data Transfer Object(DTO; 데이터 전송 개체) 클래스를 만듭니다.

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

다음 클래스는 payload가 전송하는 것과 동일한 속성 이름을 가진 DTO를 받아들입니다.

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

위 반에서는request값은 2개의 속성을 포함합니다.product그리고.product2

사용자 및 전자 메일 매개 변수를 사용하여 게시 URL 검토

params 객체는

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

백엔드 테크놀로지가 무엇인지에 따라 달라집니다.백엔드 기술이 JSON 데이터. 데이터: {id:1,name:'name',...}

그렇지 않으면 데이터를 id=1&name=name&...로 변환하기 위해 팩토리를 생성하는 가장 좋은 방법으로 데이터를 변환해야 합니다.

$120에서 content-type을 정의합니다.자세한 내용은 @filename://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로 urlencoded 폼 데이터를 POST 할 수 있습니까?

! 부호화에 대해 중요URIComponent(obj[p])는 암묵적인 방법으로 객체를 전송합니다.날짜 값이 =>'2007년 2월 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/*/ }
);

데이터 역직렬화에 newtonsoft를 사용하고 있습니다.

Post를 통해 본문 내 파라미터로 보낼 수 있는 객체는 1개뿐입니다.당신의 Post 방법을 다음과 같이 변경합니다.

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

그리고 당신의 각도 코드에서 당신은 JSON 표기법으로 제품 배열을 넘길 것이다.

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)「」의 {}추가해 주세요.

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

직접적인 해결책은 다음과 같습니다.

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

그런 다음 (발라 같은) 제품을 체내에 보냅니다.

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 Catagory)badge3번입니다.

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

다음과 같이 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");
            });

언급URL : https://stackoverflow.com/questions/30957248/how-to-send-post-in-angularjs-with-multiple-params