요청 페이로드 대신 데이터를 양식 데이터로 게시하려면 어떻게해야합니까?

아래 코드에서 AngularJS $http메소드는 URL을 호출하고 xsrf 객체를 "요청 페이로드"(Chrome 디버거 네트워크 탭에 설명 된대로)로 제출합니다. jQuery $.ajax메소드는 동일한 호출을 수행하지만 xsrf를 "양식 데이터"로 제출합니다.

AngularJS가 요청 페이로드 대신 xsrf를 양식 데이터로 제출하도록하려면 어떻게해야합니까?

var url = 'http://somewhere.com/';
var xsrf = {fkey: 'xsrf key'};

$http({
    method: 'POST',
    url: url,
    data: xsrf
}).success(function () {});

$.ajax({
    type: 'POST',
    url: url,
    data: xsrf,
    dataType: 'json',
    success: function() {}
});

전달 된 $ http 객체에 다음 줄을 추가해야합니다.

headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

그리고 전달 된 데이터는 URL 인코딩 문자열로 변환되어야합니다.

> $.param({fkey: "key"})
'fkey=key'

따라서 다음과 같은 것이 있습니다.

$http({
    method: 'POST',
    url: url,
    data: $.param({fkey: "key"}),
    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
})

보낸 사람 : https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

최신 정보

AngularJS V1.4에 추가 된 새로운 서비스를 사용하려면

• AngularJS 서비스 만 사용하는 URL 인코딩 변수

솔루션에서 jQuery를 사용하지 않으려면 시도해보십시오. 해결책은 여기에서 https : //.com/a/1714899/1784301

$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: xsrf
}).success(function () {});

이 문제를 둘러싼 혼란은 계속해서 블로그 게시물을 작성하도록 영감을주었습니다. 이 게시물에서 제안하는 솔루션은 $ http 서비스 호출을 위해 데이터 객체를 매개 변수화하는 것을 제한하지 않기 때문에 현재 최고 등급 솔루션보다 낫습니다. 즉 내 솔루션을 사용하면 실제 데이터 객체를 계속 $ http.post () 등에 전달하고 원하는 결과를 얻을 수 있습니다.

또한 최고 등급의 답변은 $ .param () 함수의 페이지에 전체 jQuery를 포함시키는 것에 의존하지만 내 솔루션은 jQuery에 독립적이며 순수한 AngularJS가 준비되어 있습니다.

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

도움이 되었기를 바랍니다.

나는 다른 답변을 몇 가지 가지고 조금 더 깨끗하게 만들었습니다 .config().app.js의 angular.module 끝에이 호출을 넣으 십시오.

.config(['$httpProvider', function ($httpProvider) {
  // Intercept POST requests, convert to standard form encoding
  $httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
  $httpProvider.defaults.transformRequest.unshift(function (data, headersGetter) {
    var key, result = [];

    if (typeof data === "string")
      return data;

    for (key in data) {
      if (data.hasOwnProperty(key))
        result.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
    }
    return result.join("&");
  });
}]);

AngularJS v1.4.0부터는 문서 페이지$httpParamSerializer 에 나열된 규칙에 따라 객체를 HTTP 요청의 일부로 변환 하는 기본 제공 서비스가 있습니다 .

다음과 같이 사용할 수 있습니다 :

$http.post('http://example.com', $httpParamSerializer(formDataObj)).
    success(function(data){/* response status 200-299 */}).
    error(function(data){/* response status 400-999 */});

올바른 양식 게시물의 경우 Content-Type헤더를 변경해야합니다. 모든 POST 요청에 대해 전체적으로이 작업을 수행하기 위해이 코드 (Albireo의 반 답변에서 가져온)를 사용할 수 있습니다.

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

현재 게시물에 대해서만이 작업을 수행하려면 headersrequest-object 의 속성을 수정해야합니다.

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
 },
 data: $httpParamSerializer(formDataObj)
};

$http(req);

전역 적으로 동작을 정의 할 수 있습니다.

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

따라서 매번 재정의하지 않아도됩니다.

$http.post("/handle/post", {
    foo: "FOO",
    bar: "BAR"
}).success(function (data, status, headers, config) {
    // TODO
}).error(function (data, status, headers, config) {
    // TODO
});

임시 해결책으로 POST를 수신하는 코드가 애플리케이션 / json 데이터에 응답하도록 만들 수 있습니다. PHP의 경우 아래 코드를 추가하여 양식 인코딩 또는 JSON으로 POST 할 수 있습니다.

//handles JSON posted arguments and stuffs them into $_POST
//angular's $http makes JSON posts (not normal "form encoded")
$content_type_args = explode(';', $_SERVER['CONTENT_TYPE']); //parse content_type string
if ($content_type_args[0] == 'application/json')
  $_POST = json_decode(file_get_contents('php://input'),true);

//now continue to reference $_POST vars as usual

이 답변은 미친듯한 과잉처럼 보이며 때로는 단순한 것이 더 좋습니다.

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {
//...

아래 솔루션으로 시도해 볼 수 있습니다

$http({
        method: 'POST',
        url: url-post,
        data: data-post-object-json,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        transformRequest: function(obj) {
            var str = [];
            for (var key in obj) {
                if (obj[key] instanceof Array) {
                    for(var idx in obj[key]){
                        var subObj = obj[key][idx];
                        for(var subKey in subObj){
                            str.push(encodeURIComponent(key) + "[" + idx + "][" + encodeURIComponent(subKey) + "]=" + encodeURIComponent(subObj[subKey]));
                        }
                    }
                }
                else {
                    str.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key]));
                }
            }
            return str.join("&");
        }
    }).success(function(response) {
          /* Do something */
        });

게시 할 어댑터 서비스를 작성하십시오.

services.service('Http', function ($http) {

    var self = this

    this.post = function (url, data) {
        return $http({
            method: 'POST',
            url: url,
            data: $.param(data),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
    }

}) 

컨트롤러 또는 다음에서 사용하십시오.

ctrls.controller('PersonCtrl', function (Http /* our service */) {
    var self = this
    self.user = {name: "Ozgur", eMail: null}

    self.register = function () {
        Http.post('/user/register', self.user).then(function (r) {
            //response
            console.log(r)
        })
    }

})

이것과 다른 관련 자료 -AJAX 양식 제출 : AngularJS Way을 ​​다루는 정말 좋은 튜토리얼이 있습니다.

기본적으로 양식 데이터를 URL 인코딩 문자열로 전송하고 있음을 나타내도록 POST 요청의 헤더를 설정하고 동일한 형식으로 전송되도록 데이터를 설정해야합니다.

$http({
  method  : 'POST',
  url     : 'url',
  data    : $.param(xsrf),  // pass in data as strings
  headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
});

여기서는 jQuery의 param () 도우미 함수가 데이터를 문자열로 직렬화하는 데 사용되지만 jQuery를 사용하지 않는 경우 수동으로 수행 할 수도 있습니다.

var fd = new FormData();
    fd.append('file', file);
    $http.post(uploadUrl, fd, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(){
    })
    .error(function(){
    });

체크 아웃하십시오! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Symfony2 사용자의 경우 :

이 작업을 위해 자바 스크립트에서 아무것도 변경하지 않으려면 symfony 앱에서 이러한 수정을 수행 할 수 있습니다.

Symfony \ Component \ HttpFoundation \ Request 클래스를 확장하는 클래스를 작성하십시오.

<?php

namespace Acme\Test\MyRequest;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\ParameterBag;

class MyRequest extends Request{


/**
* Override and extend the createFromGlobals function.
* 
* 
*
* @return Request A new request
*
* @api
*/
public static function createFromGlobals()
{
  // Get what we would get from the parent
  $request = parent::createFromGlobals();

  // Add the handling for 'application/json' content type.
  if(0 === strpos($request->headers->get('CONTENT_TYPE'), 'application/json')){

    // The json is in the content
    $cont = $request->getContent();

    $json = json_decode($cont);

    // ParameterBag must be an Array.
    if(is_object($json)) {
      $json = (array) $json;
  }
  $request->request = new ParameterBag($json);

}

return $request;

}

}

이제 app_dev.php의 클래스를 사용하십시오 (또는 사용하는 색인 ​​파일).

// web/app_dev.php

$kernel = new AppKernel('dev', true);
// $kernel->loadClassCache();
$request = ForumBundleRequest::createFromGlobals();

// use your class instead
// $request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

Content-Type이 충분하지 않은 것으로 설정하면 보내기 전에 양식 데이터를 URL로 인코딩하십시오. $http.post(url, jQuery.param(data))

현재 AngularJS Google 그룹에서 찾은 다음 솔루션을 사용하고 있습니다.

$ http
.post ( '/ echo / json /', 'json ='+ encodeURIComponent (angular.toJson (data)), {
    헤더 : {
        '콘텐츠 유형': 'application / x-www-form-urlencoded; charset = UTF-8 '
    }
}). success (함수 (데이터) {
    $ scope.data = 데이터;
});

PHP를 사용하는 경우 Request::createFromGlobals()$ _POST가 자동으로로드되지 않으므로 Symfony 2 HTTP 구성 요소와 같은 것을 사용해야 합니다.

AngularJS는 http-request 헤더 내에서 다음과 같은 내용 유형을 수행하면서 올바르게 수행합니다.

Content-Type: application/json

나와 같은 PHP를 사용하거나 Symfony2를 사용하는 경우 http://silex.sensiolabs.org/doc/cookbook/json_request_body.html 과 같이 json 표준에 대한 서버 호환성을 간단히 확장 할 수 있습니다.

Symfony2 방식 (예 : DefaultController 내부) :

$request = $this->getRequest();
if (0 === strpos($request->headers->get('Content-Type'), 'application/json')) {
    $data = json_decode($request->getContent(), true);
    $request->request->replace(is_array($data) ? $data : array());
}
var_dump($request->request->all());

장점은 jQuery 매개 변수를 사용할 필요가 없으며 AngularJS를 기본적으로 사용하여 이러한 요청을 수행 할 수 있다는 것입니다.

완전한 답변 (각도 1.4 이후). 종속성 $ httpParamSerializer를 포함해야합니다.

var res = $resource(serverUrl + 'Token', { }, {
                save: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
            });

            res.save({ }, $httpParamSerializer({ param1: 'sdsd', param2: 'sdsd' }), function (response) {

            }, function (error) { 

            });

앱 구성에서-

$httpProvider.defaults.transformRequest = function (data) {
        if (data === undefined)
            return data;
        var clonedData = $.extend(true, {}, data);
        for (var property in clonedData)
            if (property.substr(0, 1) == '$')
                delete clonedData[property];

        return $.param(clonedData);
    };

자원 요청으로-

 headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }

이것은 직접적인 대답이 아니라 약간 다른 디자인 방향입니다.

데이터를 양식으로 게시하지 말고 서버 측 오브젝트에 직접 맵핑 할 JSON 오브젝트로 또는 REST 스타일 경로 변수를 사용하십시오.

XSRF 키를 전달하려고하므로 귀하의 경우에 적합한 옵션이 없다는 것을 알고 있습니다. 이것을 경로 변수에 매핑하는 것은 끔찍한 디자인입니다.

http://www.someexample.com/xsrf/{xsrfKey}

때문에 자연 당신은 너무 다른 경로로 XSRF 키를 전달하려는 것 /login, /book-appointment등 당신은 엉망 예쁜 URL 싶지 않아

흥미롭게도 객체 필드로 추가하는 것도 적절하지 않습니다. 이제 서버에 전달하는 각 json 객체에서 필드를 추가해야하기 때문에

{
  appointmentId : 23,
  name : 'Joe Citizen',
  xsrf : '...'
}

확실히 도메인 측 객체와 직접적인 의미 론적 연관이없는 서버 측 클래스에 다른 필드를 추가하고 싶지 않습니다.

제 생각에는 xsrf 키를 전달하는 가장 좋은 방법은 HTTP 헤더를 이용하는 것입니다. 많은 xsrf 보호 서버 측 웹 프레임 워크 라이브러리가이를 지원합니다. 예를 들어 Java Spring에서는 X-CSRF-TOKENheader를 사용하여 전달할 수 있습니다 .

JS 객체를 UI 객체에 바인딩하는 Angular의 뛰어난 기능은 양식을 모두 게시하고 JSON을 게시하는 연습을 제거 할 수 있음을 의미합니다. JSON은 서버 측 객체로 쉽게 역 직렬화 될 수 있으며 맵, 배열, 중첩 된 객체 등과 같은 복잡한 데이터 구조를 지원할 수 있습니다.

폼 페이로드로 배열을 어떻게 게시합니까? 아마도 이런 식으로 :

shopLocation=downtown&daysOpen=Monday&daysOpen=Tuesday&daysOpen=Wednesday

아니면 이거:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

둘 다 나쁜 디자인입니다 ..

이것은 내가 필요로하는 일입니다. 로그 인 데이터를 양식 데이터로 API에 보내야하고 Javascript Object (userData)가 자동으로 URL 인코딩 데이터로 변환됩니다.

        var deferred = $q.defer();
        $http({
            method: 'POST',
            url: apiserver + '/authenticate',
            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: userData
        }).success(function (response) {
            //logics
            deferred.resolve(response);
        }).error(function (err, status) {
           deferred.reject(err);
        });

이것은 내 Userdata가 어떻게

var userData = {
                grant_type: 'password',
                username: loginData.userName,
                password: loginData.password
            }

$ http 객체를 생성 할 때 "data"대신 "params"속성을 사용하면됩니다.

$http({
   method: 'POST',
   url: serviceUrl + '/ClientUpdate',
   params: { LangUserId: userId, clientJSON: clients[i] },
})

위의 예에서 clients [i]는 JSON 객체입니다 (어쨌든 직렬화되지 않음). "data"대신 "params"를 사용하는 경우 angular는 $ httpParamSerializer를 사용하여 객체를 직렬화합니다. https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer

AngularJS $http서비스를 사용하고 해당 post방법을 사용 하거나 $http기능을 구성하십시오 .