[JQUERY] 어떻게 POST는 jQuery를하지 않고 $ HTTP와 폼 데이터를 urlencoded를합니까?

어떻게 POST는 jQuery를하지 않고 $ HTTP와 폼 데이터를 urlencoded를합니까?

해결법

1. ---

   1.난 당신이하지 JSON 문자열 객체에서 데이터를 변환하는 것입니다해야하지만 URL의 PARAMS 생각합니다.

   난 당신이하지 JSON 문자열 객체에서 데이터를 변환하는 것입니다해야하지만 URL의 PARAMS 생각합니다.

   벤 나델의 블로그에서.

   여기에서 예.

   $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에 추가 된 새로운 서비스를 사용하려면 참조

2. ---

   2.AngularJS와 1.4쪽으로 두 서비스 프로세스를 처리 할 수있는 URL 인코딩, POST 요청에 대한 데이터를 transformRequest과 데이터를 조작 할 필요가 없어 jQuery와 같은 외부 의존하여 :

   AngularJS와 1.4쪽으로 두 서비스 프로세스를 처리 할 수있는 URL 인코딩, POST 요청에 대한 데이터를 transformRequest과 데이터를 조작 할 필요가 없어 jQuery와 같은 외부 의존하여 :

   사용 예제

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

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

   (예를 들어, 브래킷 퍼센트 인코딩 무시) :

   • 배열을 인코딩

   {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
   

3. ---

   3.과도 같은이 모양의 모든 (또는하지 작업을)은 ... 바로이 작업을 수행 :

   과도 같은이 모양의 모든 (또는하지 작업을)은 ... 바로이 작업을 수행 :

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

4. ---

   4.문제는 JSON 문자열 형식은, 당신은 데이터의 간단한 URL 문자열을 사용할 수 있습니다 :

   문제는 JSON 문자열 형식은, 당신은 데이터의 간단한 URL 문자열을 사용할 수 있습니다 :

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

5. ---

   5.여기가 수 (더 백엔드 변경을 기쁘게해서는 안 방법입니다 ... 확실히 ... 프런트 스택 않는 경우되지 지원 응용 프로그램 / x-www-form-urlencoded를, 다음 멀리 던져 ... 않는 희망 AngularJS와!

   여기가 수 (더 백엔드 변경을 기쁘게해서는 안 방법입니다 ... 확실히 ... 프런트 스택 않는 경우되지 지원 응용 프로그램 / 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 매력처럼 작동

   사람들은 유에게 몇 가지 조언을 줄 수 있습니다 :

   (위의 제안) 데이터 모델은 사용자 이름과 암호, 당신은 여전히 ​​그렇게 할 수있는 더 복잡한 경우

   $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에 대한 문서는 여기에서 찾을 수 있습니다

6. ---

   6.그것은에 헤더를 변경 한 형태의 시도 인 경우 :

   그것은에 헤더를 변경 한 형태의 시도 인 경우 :

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

   그리고이 양식을하지 않습니다 간단한 JSON 다음이 헤더를 시도하는 경우 :

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

7. ---

   7.

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

8. ---

   8.$ HTTP를 문서에서이 작업을해야합니다 ..

   $ HTTP를 문서에서이 작업을해야합니다 ..

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

9. ---

   9.당신은 일반 자바 스크립트 객체, 아무것도를 게시 할 필요가

   당신은 일반 자바 스크립트 객체, 아무것도를 게시 할 필요가

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

   당신은 백엔드로 PHP가 있다면 당신은 좀 더 수정을 수행해야합니다 .. PHP는 서버 측을 고정이 링크를 체크 아웃

10. ---

    10.늦은 대답하지만, 나는 그것뿐만 아니라 매개 변수의 인코딩을 담당, 각 UrlSearchParams 나를 위해 매우 잘 작동 발견했다.

    늦은 대답하지만, 나는 그것뿐만 아니라 매개 변수의 인코딩을 담당, 각 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();
    

11. ---

    11.이것은 나를 위해 일했다. 나는 프런트 엔드 및 백 엔드에 대한 laravel PHP를위한 각 사용합니다. 내 프로젝트에서 각 웹은 laravel의 백엔드에 JSON 데이터를 전송합니다.

    이것은 나를 위해 일했다. 나는 프런트 엔드 및 백 엔드에 대한 laravel PHP를위한 각 사용합니다. 내 프로젝트에서 각 웹은 laravel의 백엔드에 JSON 데이터를 전송합니다.

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

    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 백엔드 laravel 컨트롤러입니다.

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

    이것은 내 laravel 라우팅입니다

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

    브라우저에서 결과는

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

    희망, 내 대답은 당신을 도울 것입니다.

from https://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-without-jquery by cc-by-sa and MIT license