Bagaimana cara POST data formulir urlencoded dengan $ http tanpa jQuery?

Saya baru mengenal AngularJS, dan untuk awalnya, saya berpikir untuk mengembangkan aplikasi baru hanya menggunakan AngularJS.

Saya mencoba membuat panggilan AJAX ke sisi server, menggunakan $httpdari Aplikasi Angular saya.

Untuk mengirim parameter, saya mencoba yang berikut:

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

Ini berfungsi, tetapi menggunakan jQuery juga di $.param. Untuk menghapus ketergantungan pada jQuery, saya mencoba:

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

tetapi ini tampaknya gagal. Kemudian saya mencoba params:

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

tetapi ini juga tampaknya gagal. Kemudian saya mencoba JSON.stringify:

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

Saya menemukan jawaban yang mungkin untuk pencarian saya, tetapi tidak berhasil. Apakah saya melakukan sesuatu yang salah? Saya yakin, AngularJS akan menyediakan fungsionalitas ini, tetapi bagaimana caranya?

Saya pikir yang perlu Anda lakukan adalah mengubah data Anda dari objek bukan ke string JSON, tetapi ke url params.

Dari blog Ben Nadel .

Secara default, layanan $ http akan mengubah permintaan keluar dengan membuat serial data sebagai JSON dan kemudian mempostingnya dengan tipe konten, "application / json". Ketika kita ingin memposting nilai sebagai posting FORMULIR, kita perlu mengubah algoritma serialisasi dan memposting data dengan tipe konten, "application / x-www-form-urlencoded".

Contoh dari sini .

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

MEMPERBARUI

Untuk menggunakan layanan baru yang ditambahkan dengan AngularJS V1.4, lihat

• Variabel penyandian URL hanya menggunakan layanan AngularJS

Variabel penyandian URL hanya menggunakan layanan AngularJS

Dengan AngularJS 1.4 dan yang lebih baru, dua layanan dapat menangani proses penyandian url data untuk permintaan POST, menghilangkan kebutuhan untuk memanipulasi data dengan transformRequestatau menggunakan dependensi eksternal seperti jQuery:

1. $httpParamSerializerJQLike- serializer yang terinspirasi oleh jQuery's .param()( disarankan )

2. $httpParamSerializer - serializer yang digunakan oleh Angular sendiri untuk permintaan GET

Contoh penggunaan

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

Lihat demo Plunker yang lebih bertele-tele

Bagaimana $httpParamSerializerJQLikedan $httpParamSerializerberbeda

Secara umum, tampaknya $httpParamSerializermenggunakan format penyandian url yang lebih "tradisional" daripada $httpParamSerializerJQLikeketika datang ke struktur data yang kompleks.

Misalnya (mengabaikan persen penyandian kurung):

• Pengkodean array

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

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

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

• Pengkodean objek

{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

Semua ini kelihatannya berlebihan (atau tidak berfungsi) ... lakukan saja ini:

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

Masalahnya adalah format string JSON, Anda dapat menggunakan string URL sederhana dalam data:

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

Inilah yang seharusnya (dan tolong jangan ada perubahan backend ... tentu saja tidak ... jika front stack Anda tidak mendukung application/x-www-form-urlencoded, maka buanglah ... semoga AngularJS melakukannya!

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

Bekerja seperti pesona dengan AngularJS 1.5

Teman-teman, mari beri kamu beberapa saran:

• gunakan janji .then(success, error)ketika berurusan dengan $http, lupakan .sucessdan .errorpanggilan balik (karena mereka sudah ditinggalkan)

• Dari situs angularjs di sini " Anda tidak dapat lagi menggunakan string JSON_CALLBACK sebagai pengganti untuk menentukan ke mana nilai parameter panggilan balik harus pergi. "

Jika model data Anda lebih kompleks daripada hanya nama pengguna dan kata sandi, Anda masih bisa melakukan itu (seperti yang disarankan di atas)

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

Dokumen untuk encodeURIComponentdapat ditemukan di sini

Jika itu bentuk coba ubah tajuk menjadi:

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

dan jika itu bukan formulir dan json sederhana maka coba tajuk ini:

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

Dari $ http docs ini seharusnya berfungsi ..

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

Anda perlu memposting objek javascript biasa, tidak ada yang lain

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

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

jika Anda memiliki php sebagai back-end maka Anda perlu melakukan beberapa modifikasi lagi .. periksa tautan ini untuk memperbaiki sisi server php

Meskipun jawaban terlambat, saya menemukan UrlSearchParams sudut bekerja sangat baik bagi saya, itu mengurus pengodean parameter juga.

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

Ini berhasil untuk saya. Saya menggunakan sudut untuk front-end dan php laravel untuk back-end. Dalam proyek saya, web sudut mengirim data json ke back-end laravel.

Ini adalah pengontrol sudut saya.

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

});

Ini adalah pengendali php back-end laravel saya.

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

Ini adalah routing laravel saya

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

Hasil dalam browser adalah

status 200
data JSON_CALLBACK ({"nama pengguna": "Victoria", "kata sandi": "kata sandi", "panggilan balik": "JSON_CALLBACK"}); httpTesting.js: 18 fungsi header (c) {a || (a = sc (b)); mengembalikan c? a [K (c)] || null: a}

Ada ekstensi chrome yang disebut tukang pos. Anda dapat menggunakan untuk menguji url back-end Anda apakah berfungsi atau tidak. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=id

semoga jawaban saya akan membantu anda.