Làm cách nào tôi có thể đăng dữ liệu dưới dạng dữ liệu biểu mẫu thay vì tải trọng yêu cầu?

Trong mã bên dưới, $httpphương thức AngularJS gọi URL và gửi đối tượng xsrf dưới dạng "Tải trọng yêu cầu" (như được mô tả trong tab mạng của trình gỡ lỗi Chrome). $.ajaxPhương thức jQuery thực hiện cùng một cuộc gọi, nhưng gửi xsrf dưới dạng "Dữ liệu biểu mẫu".

Làm cách nào tôi có thể khiến AngularJS gửi xsrf dưới dạng dữ liệu biểu mẫu thay vì tải trọng yêu cầu?

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

Dòng sau cần được thêm vào đối tượng $ http được thông qua:

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

Và dữ liệu được truyền phải được chuyển đổi thành chuỗi được mã hóa URL:

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

Vì vậy, bạn có một cái gì đó như:

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

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

CẬP NHẬT

Để sử dụng các dịch vụ mới được thêm vào với AngularJS v1.4, hãy xem

• Biến mã hóa URL chỉ sử dụng dịch vụ AngularJS

Nếu bạn không muốn sử dụng jQuery trong giải pháp, bạn có thể thử điều này. Giải pháp bắt đầu từ đây https://stackoverflow.com/a/1714899/1784602

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

Sự nhầm lẫn liên tục xung quanh vấn đề này đã thôi thúc tôi viết một bài đăng trên blog về nó. Giải pháp tôi đề xuất trong bài đăng này tốt hơn giải pháp được xếp hạng hàng đầu hiện tại của bạn bởi vì nó không hạn chế bạn tham số hóa đối tượng dữ liệu của bạn cho các cuộc gọi dịch vụ $ http; tức là với giải pháp của tôi, bạn có thể chỉ cần tiếp tục chuyển các đối tượng dữ liệu thực tế đến $ http.post (), v.v. và vẫn đạt được kết quả mong muốn.

Ngoài ra, câu trả lời được xếp hạng hàng đầu phụ thuộc vào việc bao gồm toàn bộ jQuery trong trang cho hàm $ .param (), trong khi giải pháp của tôi là jQuery bất khả tri, AngularJS thuần túy đã sẵn sàng.

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

Hi vọng điêu nay co ich.

Tôi đã lấy một vài câu trả lời khác và làm cho một cái gì đó sạch sẽ hơn một chút, đặt .config()cuộc gọi này vào cuối angular.module của bạn trong app.js của bạn:

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

Kể từ AngularJS v1.4.0, có một $httpParamSerializerdịch vụ tích hợp chuyển đổi bất kỳ đối tượng nào thành một phần của yêu cầu HTTP theo các quy tắc được liệt kê trên trang tài liệu .

Nó có thể được sử dụng như thế này:

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

Hãy nhớ rằng đối với một bài viết mẫu chính xác, Content-Typetiêu đề phải được thay đổi. Để thực hiện điều này trên toàn cầu cho tất cả các yêu cầu POST, mã này (được lấy từ nửa câu trả lời của Albire) có thể được sử dụng:

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

Để làm điều này chỉ cho bài viết hiện tại, thuộc headerstính của đối tượng yêu cầu cần phải được sửa đổi:

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

$http(req);

Bạn có thể xác định hành vi trên toàn cầu:

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

Vì vậy, bạn không phải xác định lại nó mỗi lần:

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

Như một giải pháp thay thế, bạn có thể chỉ cần làm cho mã nhận được phản hồi POST cho dữ liệu ứng dụng / json. Đối với PHP tôi đã thêm mã dưới đây, cho phép tôi POST vào mã đó dưới dạng mã hóa hoặc 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

Những câu trả lời này trông giống như quá mức điên rồ, đôi khi, đơn giản chỉ là tốt hơn:

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

Bạn có thể thử với giải pháp dưới đây

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

Tạo một dịch vụ chuyển đổi cho bài viết:

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

}) 

Sử dụng nó trong bộ điều khiển của bạn hoặc bất cứ điều gì:

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

})

Có một hướng dẫn thực sự hay về vấn đề này và những thứ liên quan khác - Gửi các hình thức AJAX: The AngularJS Way .

Về cơ bản, bạn cần đặt tiêu đề của yêu cầu POST để cho biết rằng bạn đang gửi dữ liệu biểu mẫu dưới dạng chuỗi được mã hóa URL và đặt dữ liệu được gửi cùng định dạng

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

Lưu ý rằng hàm trợ giúp param () của jQuery được sử dụng ở đây để tuần tự hóa dữ liệu thành một chuỗi, nhưng bạn cũng có thể thực hiện việc này theo cách thủ công nếu không sử dụng jQuery.

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

Xin vui lòng kiểm tra! https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

Đối với người dùng Symfony2:

Nếu bạn không muốn thay đổi bất cứ điều gì trong javascript của mình để điều này hoạt động, bạn có thể thực hiện những sửa đổi này trong ứng dụng symfony:

Tạo một lớp mở rộng lớp Symfony \ Element \ 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;

}

}

Bây giờ sử dụng lớp của bạn trong app_dev.php (hoặc bất kỳ tệp chỉ mục nào bạn sử dụng)

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

Chỉ cần đặt Loại nội dung là không đủ, url mã hóa dữ liệu biểu mẫu trước khi gửi. $http.post(url, jQuery.param(data))

Tôi hiện đang sử dụng giải pháp sau đây mà tôi tìm thấy trong nhóm google AngularJS.

$ http
.post ('/ echo / json /', 'json =' + encodeURIComponent (angular.toJson (data)), {
    tiêu đề: {
        'Loại nội dung': 'application / x-www-form-urlencoding; bộ ký tự = UTF-8 '
    }
}). thành công (chức năng (dữ liệu) {
    $ scope.data = dữ liệu;
});

Lưu ý rằng nếu bạn đang sử dụng PHP, bạn sẽ cần sử dụng một cái gì đó như thành phần HTTP của Symfony 2 Request::createFromGlobals()để đọc phần này, vì $ _POST sẽ không tự động được tải với nó.

AngularJS đang làm điều đó đúng khi nó thực hiện kiểu nội dung sau bên trong tiêu đề yêu cầu http:

Content-Type: application/json

Nếu bạn đang sử dụng php như tôi hoặc thậm chí với Symfony2, bạn có thể mở rộng khả năng tương thích máy chủ của mình cho tiêu chuẩn json như được mô tả ở đây: http://silex.sensiolabs.org/doc/cookbook/json_Vquest_body.html

Cách Symfony2 (ví dụ bên trong DefaultContoder của bạn):

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

Ưu điểm sẽ là, bạn không cần sử dụng jQuery param và bạn có thể sử dụng AngularJS theo cách tự nhiên để thực hiện các yêu cầu đó.

Câu trả lời đầy đủ (kể từ góc 1.4). Bạn cần bao gồm de phụ thuộc $ 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) { 

            });

Trong cấu hình ứng dụng của bạn -

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

Với yêu cầu tài nguyên của bạn -

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

Đây không phải là một câu trả lời trực tiếp, mà là một hướng thiết kế hơi khác:

Không đăng dữ liệu dưới dạng biểu mẫu, nhưng dưới dạng đối tượng JSON được ánh xạ trực tiếp vào đối tượng phía máy chủ hoặc sử dụng biến đường dẫn kiểu REST

Bây giờ tôi biết không có tùy chọn nào có thể phù hợp trong trường hợp của bạn vì bạn đang cố vượt qua khóa XSRF. Ánh xạ nó vào một biến đường dẫn như thế này là một thiết kế khủng khiếp:

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

Bởi vì về bản chất, bạn cũng muốn chuyển khóa xsrf sang đường dẫn khác /login,/book-appointment v.v. và bạn không muốn làm URL đẹp của mình

Thật thú vị khi thêm nó dưới dạng một trường đối tượng cũng không phù hợp, bởi vì bây giờ trên mỗi đối tượng json bạn chuyển đến máy chủ, bạn phải thêm trường

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

Bạn chắc chắn không muốn thêm một trường khác vào lớp phía máy chủ không có liên kết ngữ nghĩa trực tiếp với đối tượng miền.

Theo tôi, cách tốt nhất để vượt qua khóa xsrf của bạn là thông qua tiêu đề HTTP. Nhiều thư viện khung web phía máy chủ bảo vệ xsrf hỗ trợ này. Ví dụ: trong Java Spring, bạn có thể chuyển nó bằng X-CSRF-TOKENtiêu đề .

Khả năng tuyệt vời của Angular trong việc ràng buộc đối tượng JS với đối tượng UI có nghĩa là chúng ta có thể thoát khỏi thực tiễn đăng mẫu cùng nhau và thay vào đó đăng JSON. JSON có thể dễ dàng được tuần tự hóa thành đối tượng phía máy chủ và hỗ trợ các cấu trúc dữ liệu phức tạp như bản đồ, mảng, các đối tượng lồng nhau, v.v.

Làm thế nào để bạn gửi mảng trong một tải trọng mẫu? Có lẽ như thế này:

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

hoặc này:

shopLocation=downtwon&daysOpen=Monday,Tuesday,Wednesday

Cả hai đều có thiết kế kém ..

Đây là những gì tôi đang làm cho nhu cầu của mình, Nơi tôi cần gửi dữ liệu đăng nhập vào API dưới dạng dữ liệu biểu mẫu và Đối tượng Javascript (userData) sẽ tự động được chuyển đổi thành dữ liệu được mã hóa 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);
        });

Đây là cách Userdata của tôi

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

Độ mỏng duy nhất bạn phải thay đổi là sử dụng thuộc tính "params" thay vì "data" khi bạn tạo đối tượng $ http:

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

Trong ví dụ trên, các máy khách [i] chỉ là đối tượng JSON (không được tuần tự hóa theo bất kỳ cách nào). Nếu bạn sử dụng "params" chứ không phải "data" angular sẽ tuần tự hóa đối tượng cho bạn bằng cách sử dụng $ httpParamSerializer: https://docs.angularjs.org/api/ng/service/ $ httpParamSerializer

Sử dụng $httpdịch vụ AngularJS và sử dụng postphương thức hoặc $httpchức năng cấu hình của nó.