jQuery없이 urlencoded 양식 데이터를 $ http로 어떻게 POST합니까?

저는 AngularJS를 처음 사용하기 시작했으며 처음에는 AngularJS 만 사용하여 새 응용 프로그램을 개발하려고 생각했습니다.

$httpAngular 앱을 사용하여 서버 측에 AJAX 호출을 시도하고 있습니다.

매개 변수를 보내기 위해 다음을 시도했습니다.

$http({
    method: "post",
    url: URL,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
    console.log(result);
});

이것은 작동하지만에서 jQuery를 사용하고 $.param있습니다. jQuery에 대한 종속성을 제거하기 위해 다음을 시도했습니다.

data: {username: $scope.userName, password: $scope.password}

그러나 이것은 실패하는 것처럼 보였다. 그런 다음 시도했습니다 params:

params: {username: $scope.userName, password: $scope.password}

그러나 이것은 또한 실패한 것처럼 보였다. 그런 다음 시도했습니다 JSON.stringify:

data: JSON.stringify({username: $scope.userName, password: $scope.password})

내 퀘스트에 대한 가능한 답변을 찾았지만 성공하지 못했습니다. 내가 뭔가 잘못하고 있습니까? AngularJS 가이 기능을 제공 할 것이라고 확신하지만 어떻게해야합니까?

당신이해야 할 일은 데이터를 객체에서 JSON 문자열이 아닌 URL 매개 변수로 변환하는 것입니다.

Ben Nadel의 블로그에서 .

기본적으로 $ http 서비스는 데이터를 JSON으로 직렬화 한 다음 컨텐츠 유형 "application / json"으로 게시하여 발신 요청을 변환합니다. 값을 FORM 포스트로 게시하려면 직렬화 알고리즘을 변경하고 "application / x-www-form-urlencoded"컨텐츠 유형으로 데이터를 게시해야합니다.

여기의 예 입니다 .

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

최신 정보

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

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

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

AngularJS 1.4 이상을 사용하면 두 서비스가 POST 요청에 대한 URL 인코딩 데이터 프로세스를 처리 할 수 ​​있으므로 transformRequestjQuery와 같은 외부 종속성을 사용하거나 외부 종속성을 사용하여 데이터를 조작 할 필요가 없습니다 .

1. $httpParamSerializerJQLike-jQuery에서 영감을 얻은 직렬 변환기 .param()( 권장 )

2. $httpParamSerializer -GET 요청을 위해 Angular 자체에서 사용하는 시리얼 라이저

사용법 예

$http({
  url: 'some/api/endpoint',
  method: 'POST',
  data: $httpParamSerializerJQLike($scope.appForm.data), // Make sure to inject the service you choose to the controller
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded' // Note the appropriate header
  }
}).then(function(response) { /* do something here */ });

더 자세한 Plunker 데모보기

어떻게 $httpParamSerializerJQLike그리고 $httpParamSerializer다른가

일반적으로 복잡한 데이터 구조에 $httpParamSerializer비해 "전통적인"URL 인코딩 형식이 덜 사용 $httpParamSerializerJQLike됩니다.

예를 들어 (괄호의 백분율 인코딩 무시) :

• 배열 인코딩

{sites:['google', 'Facebook']} // Object with array property

sites[]=google&sites[]=facebook // Result with $httpParamSerializerJQLike

sites=google&sites=facebook // Result with $httpParamSerializer

• 객체 인코딩

{address: {city: 'LA', country: 'USA'}} // Object with object property

address[city]=LA&address[country]=USA // Result with $httpParamSerializerJQLike

address={"city": "LA", country: "USA"} // Result with $httpParamSerializer

이 모든 것이 과잉처럼 보이거나 작동하지 않습니다 ...이 작업을 수행하십시오.

$http.post(loginUrl, `username=${ encodeURIComponent(username) }` +
                     `&password=${ encodeURIComponent(password) }` +
                     '&grant_type=password'
).success(function (data) {

문제는 JSON 문자열 형식입니다. 데이터에 간단한 URL 문자열을 사용할 수 있습니다.

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    data: 'username='+$scope.userName+'&password='+$scope.password
}).success(function () {});

여기에 있어야하는 방법이 있습니다 (그리고 백엔드 변경을 피하십시오 ... 확실하지 않습니다 ... 프런트 스택이 지원되지 않으면 application/x-www-form-urlencoded버립니다 ... 희망적으로 AngularJS는 않습니다!

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: 'username='+$scope.username+'&password='+$scope.password
 }).then(function(response) {
    // on success
 }, function(response) {
    // on error
 });

AngularJS 1.5의 매력처럼 작동

사람들에게 조언을 해주세요.

• 약속을 사용하여 .then(success, error)처리 할 때 $http잊어, .sucess그리고 .error콜백 (그들이 사용되지대로)

• angularjs 사이트 에서 " 더 이상 JSON_CALLBACK 문자열을 콜백 매개 변수 값의 위치를 ​​지정하기위한 자리 표시 자로 사용할 수 없습니다. "

데이터 모델이 사용자 이름과 비밀번호보다 복잡한 경우에도 위에서 제안한대로 계속 수행 할 수 있습니다.

$http({
     method: 'POST',
     url: 'api_endpoint',
     headers: {'Content-Type': 'application/x-www-form-urlencoded'},
     data: json_formatted_data,
     transformRequest: function(data, headers) {
          return transform_json_to_urlcoded(data); // iterate over fields and chain key=value separated with &, using encodeURIComponent javascript function
     }
}).then(function(response) {
  // on succes
}, function(response) {
  // on error
});

에 대한 문서는 여기encodeURIComponent 에서 찾을 수 있습니다

양식 인 경우 헤더를 다음과 같이 변경하십시오.

headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

그리고 그것이 형식이 아니고 간단한 json이 아니라면이 헤더를 사용해보십시오.

headers[ "Content-type" ] = "application/json";

$http({

    method: "POST",
    url: "/server.php",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    data: "name='Олег'&age='28'",


}).success(function(data, status) {
    console.log(data);
    console.log(status);
});

로부터 $ HTTP를 문서이 작동합니다 ..

  $http.post(url, data,{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
    .success(function(response) {
         // your code...
     });

평범한 자바 스크립트 객체를 게시해야합니다.

           var request = $http({
                method: "post",
                url: "process.cfm",
                transformRequest: transformRequestAsFormPost,
                data: { id: 4, name: "Kim" }
            });

            request.success(
                function( data ) {
                    $scope.localData = data;
                }
            );

백엔드로 PHP를 사용하는 경우 좀 더 수정해야합니다. PHP 서버 측 수정을 위해이 링크 를 확인 하십시오 .

답변이 늦었지만 각도 UrlSearchParams가 나에게 매우 효과적이라는 것을 알았지 만 매개 변수의 인코딩도 처리합니다.

let params = new URLSearchParams();
params.set("abc", "def");

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded'});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http
.post(UrlUtil.getOptionSubmitUrl(parentSubcatId), params, options)
.catch();

이것은 나를 위해 일했습니다. 프론트 엔드에는 angular를 사용하고 백 엔드에는 laravel php를 사용합니다. 내 프로젝트에서 각도 웹은 JSON 데이터를 laravel 백엔드로 보냅니다.

이것은 내 각도 컨트롤러입니다.

var angularJsApp= angular.module('angularJsApp',[]);
angularJsApp.controller('MainCtrl', function ($scope ,$http) {

    $scope.userName ="Victoria";
    $scope.password ="password"


       $http({
            method :'POST',
            url:'http://api.mywebsite.com.localhost/httpTest?callback=JSON_CALLBACK',
            data: { username :  $scope.userName , password: $scope.password},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
            console.log('status',status);
            console.log('data',status);
            console.log('headers',status);
        });

});

이것은 내 PHP 백엔드 라 라벨 컨트롤러입니다.

public function httpTest(){
        if (Input::has('username')) {
            $user =Input::all();
            return  Response::json($user)->setCallback(Input::get('callback'));
        }
    }

이것은 나의 라 라벨 라우팅

Route::post('httpTest','HttpTestController@httpTest');

브라우저의 결과는

상태 200
데이터 JSON_CALLBACK ({ "사용자 이름": "빅토리아", "암호": "암호", "콜백": "JSON_CALLBACK"}); httpTesting.js : 18 헤더 함수 (c) {a || (a = sc (b)); return c? a [K (c)] || null : a}

우편 배달부라는 크롬 확장이 있습니다. 백엔드 URL이 작동하는지 여부를 테스트하는 데 사용할 수 있습니다. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=ko

희망적으로, 내 대답이 당신을 도울 것입니다.