ฉันจะโพสต์ข้อมูลเป็นข้อมูลแบบฟอร์มแทนที่จะเป็นเพย์โหลดคำขอได้อย่างไร

ในรหัสด้านล่างนี้$httpวิธีAngularJS เรียก URL และส่งวัตถุ xsrf เป็น "ขอให้จัดทำข้อมูล" (ตามที่อธิบายไว้ในแท็บเครือข่ายดีบักเกอร์ Chrome) $.ajaxวิธีการjQuery ทำการโทรแบบเดียวกัน แต่ส่ง xsrf เป็น "Data Form"

ฉันจะทำให้ 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

UPDATE

หากต้องการใช้บริการใหม่ที่เพิ่มเข้ามาด้วย AngularJS V1.4 โปรดดู

• ตัวแปรการเข้ารหัส URL ใช้บริการ AngularJS เท่านั้น

หากคุณไม่ต้องการใช้ jQuery ในโซลูชันคุณสามารถลองได้ ทางออกจากที่นี่ 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 () {});

ความสับสนอย่างต่อเนื่องเกี่ยวกับปัญหานี้เป็นแรงบันดาลใจให้ฉันเขียนโพสต์บล็อกเกี่ยวกับเรื่องนี้ โซลูชันที่ฉันเสนอในโพสต์นี้ดีกว่าโซลูชันที่ได้รับคะแนนสูงสุดในปัจจุบันของคุณเพราะไม่ได้ จำกัด ให้คุณกำหนดวัตถุข้อมูลของคุณสำหรับการเรียกใช้บริการ $ http; เช่นกับโซลูชันของฉันคุณสามารถส่งต่อวัตถุข้อมูลจริงไปที่ $ http.post () และยังคงได้ผลลัพธ์ตามที่ต้องการ

คำตอบที่ได้รับคะแนนสูงสุดนั้นขึ้นอยู่กับการรวม jQuery แบบเต็มในหน้าสำหรับฟังก์ชั่น $ .param () ในขณะที่คำตอบของฉันคือ jQuery ผู้ไม่เชื่อเรื่องพระเจ้าพร้อม AngularJS บริสุทธิ์

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

หวังว่านี่จะช่วยได้

ฉันใช้คำตอบอื่น ๆ สองสามข้อและทำให้บางสิ่งบางอย่างสะอาด.config()สะอ้านวางสายนี้ไว้ที่ส่วนท้ายของ angular.module ใน 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("&");
  });
}]);

ในฐานะของ 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";

หากต้องการทำสิ่งนี้เฉพาะกับโพสต์ปัจจุบันheadersคุณสมบัติของคำขอวัตถุต้องได้รับการแก้ไข:

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

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

คำตอบเหล่านี้ดูเหมือน overkill บ้าบางครั้งง่ายดีกว่า:

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

})

- มีการกวดวิชาที่ดีจริงๆที่จะไปมากกว่านี้และสิ่งอื่น ๆ ที่เกี่ยวข้องAngularJS Way:

โดยทั่วไปคุณต้องตั้งค่าส่วนหัวของคำขอ POST เพื่อระบุว่าคุณกำลังส่งข้อมูลแบบฟอร์มเป็นสตริงที่เข้ารหัส URL และตั้งค่าข้อมูลที่จะส่งในรูปแบบเดียวกัน

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

โปรดทราบว่าฟังก์ชั่นตัวช่วย param () ของ jQuery ใช้ที่นี่เพื่อจัดลำดับข้อมูลเป็นสตริง แต่คุณสามารถทำได้ด้วยตนเองเช่นกันหากไม่ได้ใช้ 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);

เพียงแค่ตั้งค่าประเภทเนื้อหาไม่เพียงพอ url เข้ารหัสข้อมูลในแบบฟอร์มก่อนส่ง $http.post(url, jQuery.param(data))

ขณะนี้ฉันใช้โซลูชันต่อไปนี้ที่ฉันพบในกลุ่ม Google AngularJS

$ http
.post ('/ echo / json /', 'json =' + encodeURIComponent (angular.toJson (ข้อมูล)), {
    ส่วนหัว: {
        'ชนิดเนื้อหา': 'application / x-www ฟอร์ม urlencoded; charset = UTF-8'
    }
}). ความสำเร็จ (ฟังก์ชั่น (ข้อมูล) {
    $ scope.data = data;
});

โปรดทราบว่าหากคุณใช้ PHP คุณจะต้องใช้ส่วนประกอบเช่น Symfony 2 HTTP Request::createFromGlobals()เพื่ออ่านสิ่งนี้เนื่องจาก $ _POST จะไม่โหลดโดยอัตโนมัติ

AngularJS ทำถูกต้องเนื่องจากทำเนื้อหาประเภทต่อไปนี้ภายในส่วนหัว http- คำขอ:

Content-Type: application/json

ถ้าคุณจะไปด้วย php เหมือนผมหรือแม้กระทั่งกับ Symfony2 คุณสามารถขยายการทำงานร่วมกันของเซิร์ฟเวอร์สำหรับมาตรฐาน JSON เช่นอธิบายไว้ที่นี่: http://silex.sensiolabs.org/doc/cookbook/json_request_body.html

วิธี 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 param และคุณสามารถใช้ 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-TOKENส่วนหัวส่วนหัว

ความสามารถที่ยอดเยี่ยมของ Angular ในการเชื่อมโยงวัตถุ JS ไปยังวัตถุ UI หมายความว่าเราสามารถกำจัดการฝึกการโพสต์ฟอร์มทั้งหมดเข้าด้วยกันและโพสต์ JSON แทน JSON สามารถถูกทำให้เป็นอนุกรมในวัตถุฝั่งเซิร์ฟเวอร์และสนับสนุนโครงสร้างข้อมูลที่ซับซ้อนเช่นแผนที่, อาร์เรย์, วัตถุที่ซ้อนกันและอื่น ๆ

คุณจะทำอย่างไรโพสต์อาร์เรย์ในบรรจุรูปแบบ? อาจจะเป็นเช่นนี้:

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

หรือสิ่งนี้:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

ทั้งมีการออกแบบที่น่าสงสาร ..

นี่คือสิ่งที่ฉันทำเพื่อความต้องการของฉันที่ฉันต้องการส่งข้อมูลการเข้าสู่ระบบไปยัง API เป็นข้อมูลแบบฟอร์มและวัตถุ Javascript (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);
        });

นี่คือข้อมูลผู้ใช้ของฉัน

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

เพียงบางที่คุณต้องเปลี่ยนคือการใช้ "params" คุณสมบัติมากกว่า "ข้อมูล" เมื่อคุณสร้างวัตถุ $ http ของคุณ:

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

ในตัวอย่างข้างต้นไคลเอนต์ [i] เป็นเพียงวัตถุ JSON (ไม่ต่อเนื่องในทางใดทางหนึ่ง) หากคุณใช้ "params" แทน "data" เชิงมุมจะทำให้วัตถุเป็นอันดับโดยใช้ $ httpParamSerializer: https://docs.angularjs.org/api/ng/serv// $ httpParamSerializer

ใช้$httpบริการAngularJS และใช้postวิธีการหรือกำหนดค่า$httpฟังก์ชั่น