Bagaimana cara mengirim data sebagai data formulir alih-alih payload permintaan?

Dalam kode di bawah ini, $httpmetode AngularJS memanggil URL, dan mengirimkan objek xsrf sebagai "Minta Payload" (seperti yang dijelaskan dalam tab jaringan debugger Chrome). $.ajaxMetode jQuery melakukan panggilan yang sama, tetapi mengirimkan xsrf sebagai "Form Data".

Bagaimana saya bisa membuat AngularJS mengirimkan xsrf sebagai data formulir alih-alih muatan permintaan?

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

Baris berikut perlu ditambahkan ke objek $ http yang diteruskan:

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

Dan data yang dikirimkan harus dikonversi ke string yang disandikan URL:

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

Jadi, Anda memiliki sesuatu seperti:

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

Dari: https://groups.google.com/forum/#!msg/angular/5nAedJ1LyO0/4Vj_72EZcDsJ

MEMPERBARUI

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

• Variabel penyandian URL hanya menggunakan layanan AngularJS

Jika Anda tidak ingin menggunakan jQuery dalam solusi, Anda bisa mencoba ini. Solusi diperoleh dari sini https://stackoverflow.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 () {});

Kebingungan yang terus berlanjut seputar masalah ini mengilhami saya untuk menulis posting blog tentang hal itu. Solusi yang saya usulkan dalam posting ini lebih baik daripada solusi teratas Anda saat ini karena tidak membatasi Anda untuk parametrizing objek data Anda untuk panggilan layanan $ http; yaitu dengan solusi saya, Anda dapat terus meneruskan objek data aktual ke $ http.post (), dll. dan masih mencapai hasil yang diinginkan.

Juga, jawaban berperingkat teratas bergantung pada dimasukkannya jQuery penuh di halaman untuk fungsi $ .param (), sedangkan solusi saya adalah jQuery agnostic, AngularJS murni siap.

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

Semoga ini membantu.

Saya mengambil beberapa jawaban lain dan membuat sesuatu yang sedikit lebih bersih, letakkan .config()panggilan ini di ujung angular.module Anda di app.js:

.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("&");
  });
}]);

Pada AngularJS v1.4.0, ada layanan built-in $httpParamSerializeryang mengubah objek apa pun menjadi bagian dari permintaan HTTP sesuai dengan aturan yang tercantum pada halaman dokumen .

Dapat digunakan seperti ini:

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

Ingat bahwa untuk posting bentuk yang benar, Content-Typetajuk harus diubah. Untuk melakukan ini secara global untuk semua permintaan POST, kode ini (diambil dari setengah jawaban Albireo) dapat digunakan:

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

Untuk melakukan ini hanya untuk posting saat ini, headersproperti dari objek-permintaan perlu diubah:

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

$http(req);

Anda dapat mendefinisikan perilaku secara global:

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

Jadi Anda tidak perlu mendefinisikannya kembali setiap waktu:

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

Sebagai solusinya, Anda cukup membuat kode yang menerima POST merespons data aplikasi / json. Untuk PHP saya menambahkan kode di bawah ini, memungkinkan saya untuk POST untuk itu baik dalam bentuk-disandikan atau JSON.

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

Jawaban-jawaban ini terlihat seperti gila berlebihan, kadang-kadang, sederhana hanya lebih baik:

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

Anda dapat mencoba dengan solusi di bawah ini

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

Buat layanan adaptor untuk posting:

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

}) 

Gunakan di pengontrol Anda atau apa pun:

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

})

Ada tutorial yang sangat bagus yang membahas hal ini dan hal-hal terkait lainnya - Menyerahkan Formulir AJAX: Cara AngularJS .

Pada dasarnya, Anda perlu mengatur tajuk permintaan POST untuk menunjukkan bahwa Anda mengirim data formulir sebagai string yang disandikan URL, dan mengatur data yang akan dikirim dengan format yang sama

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

Perhatikan bahwa fungsi pembantu param () jQuery digunakan di sini untuk membuat serialisasi data ke dalam sebuah string, tetapi Anda dapat melakukan ini secara manual juga jika tidak menggunakan jQuery.

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

Silakan checkout! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Untuk pengguna Symfony2:

Jika Anda tidak ingin mengubah apa pun di javascript Anda agar berfungsi, Anda dapat melakukan modifikasi ini di aplikasi symfony Anda:

Buat kelas yang memperluas kelas 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;

}

}

Sekarang gunakan kelas Anda di app_dev.php (atau file indeks apa pun yang Anda gunakan)

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

Cukup atur Content-Type tidak cukup, url encode data formulir sebelum mengirim. $http.post(url, jQuery.param(data))

Saat ini saya menggunakan solusi berikut yang saya temukan di grup google AngularJS.

$ http
.post ('/ echo / json /', 'json =' + encodeURIComponent (angular.toJson (data)), {
    tajuk: {
        'Tipe-Konten': 'aplikasi / x-www-form-urlencoded; charset = UTF-8 '
    }
}). Sukses (fungsi (data) {
    $ scope.data = data;
});

Perhatikan bahwa jika Anda menggunakan PHP, Anda harus menggunakan sesuatu seperti komponen HTTP Symfony 2 Request::createFromGlobals()untuk membaca ini, karena $ _POST tidak akan secara otomatis dimuat dengannya.

AngularJS melakukannya dengan benar saat melakukan tipe-konten berikut di dalam header http-request:

Content-Type: application/json

Jika Anda menggunakan php seperti saya, atau bahkan dengan Symfony2, Anda cukup memperluas kompatibilitas server Anda untuk standar json seperti dijelaskan di sini: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

Cara Symfony2 (misalnya di dalam DefaultController Anda):

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

Keuntungannya adalah, bahwa Anda tidak perlu menggunakan param jQuery dan Anda bisa menggunakan AngularJS cara asalnya untuk melakukan permintaan seperti itu.

Jawaban lengkap (sejak sudut 1.4). Anda harus menyertakan de dependency $ 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) { 

            });

Di konfigurasi aplikasi Anda -

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

Dengan permintaan sumber daya Anda -

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

Ini bukan jawaban langsung, melainkan arah desain yang sedikit berbeda:

Jangan memposting data sebagai formulir, tetapi sebagai objek JSON yang akan langsung dipetakan ke objek sisi server, atau gunakan variabel jalur gaya REST

Sekarang saya tahu tidak ada pilihan yang cocok dalam kasus Anda karena Anda mencoba untuk melewati kunci XSRF. Memetakannya ke variabel path seperti ini adalah desain yang mengerikan:

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

Karena pada dasarnya Anda ingin meneruskan kunci xsrf ke jalur lain juga /login,, /book-appointmentdll. Dan Anda tidak ingin mengacaukan URL cantik Anda

Menariknya menambahkannya sebagai bidang objek juga tidak tepat, karena sekarang pada setiap objek json yang Anda lewati ke server Anda harus menambahkan bidang tersebut

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

Anda tentu tidak ingin menambahkan bidang lain di kelas sisi server Anda yang tidak memiliki asosiasi semantik langsung dengan objek domain.

Menurut pendapat saya cara terbaik untuk melewatkan kunci xsrf Anda adalah melalui header HTTP. Banyak pustaka kerangka kerja web server sisi perlindungan xsrf mendukung ini. Misalnya di Java Spring, Anda bisa meneruskannya menggunakan X-CSRF-TOKENheader .

Kemampuan Angular yang sangat baik untuk mengikat objek JS ke objek UI berarti kita dapat menyingkirkan praktik posting form bersama-sama, dan mengirim JSON sebagai gantinya. JSON dapat dengan mudah diderialisasi ke objek sisi server dan mendukung struktur data yang kompleks seperti peta, array, objek bersarang, dll.

Bagaimana cara Anda memposting array dalam bentuk muatan? Mungkin seperti ini:

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

atau ini:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Keduanya desain yang buruk ..

Ini adalah apa yang saya lakukan untuk kebutuhan saya, Di mana saya perlu mengirim data masuk ke API sebagai data formulir dan Objek Javascript (userData) semakin dikonversi secara otomatis ke URL data yang dikodekan

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

Ini bagaimana Userdata saya

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

Satu-satunya tipis yang harus Anda ubah adalah menggunakan properti "params" daripada "data" saat Anda membuat objek $ http Anda:

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

Dalam contoh di atas klien [i] hanyalah objek JSON (tidak diserialisasi dengan cara apa pun). Jika Anda menggunakan "params" daripada "data" angular akan membuat serial objek untuk Anda menggunakan $ httpParamSerializer: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer

Gunakan $httplayanan AngularJS dan gunakan postmetode atau konfigurasikan $httpfungsinya.