Làm cách nào để tôi POST dữ liệu biểu mẫu được mã hóa bằng $ http mà không có jQuery?

Tôi chưa quen với AngularJS và để bắt đầu, tôi đã nghĩ sẽ phát triển một ứng dụng mới chỉ sử dụng AngularJS.

Tôi đang cố gắng thực hiện cuộc gọi AJAX đến phía máy chủ, sử dụng $httptừ Ứng dụng Angular của tôi.

Để gửi các tham số, tôi đã thử như sau:

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

Điều này đang hoạt động, nhưng nó cũng đang sử dụng jQuery $.param. Để loại bỏ sự phụ thuộc vào jQuery, tôi đã thử:

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

nhưng điều này dường như thất bại. Sau đó tôi đã thử params:

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

nhưng điều này dường như cũng thất bại. Sau đó tôi đã thử JSON.stringify:

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

Tôi tìm thấy những câu trả lời có thể cho nhiệm vụ của mình, nhưng không thành công. Tôi có làm điều gì sai? Tôi chắc chắn, AngularJS sẽ cung cấp chức năng này, nhưng bằng cách nào?

Tôi nghĩ bạn cần làm là chuyển đổi dữ liệu của mình từ đối tượng không thành chuỗi JSON, mà thành các thông số url.

Từ blog của Ben Nadel .

Theo mặc định, dịch vụ $ http sẽ chuyển đổi yêu cầu gửi đi bằng cách tuần tự hóa dữ liệu dưới dạng JSON và sau đó đăng nó với loại nội dung, "application / json". Khi chúng tôi muốn đăng giá trị dưới dạng bài đăng FORM, chúng tôi cần thay đổi thuật toán tuần tự hóa và đăng dữ liệu với kiểu nội dung, "application / x-www-form-urlencoding".

Ví dụ từ đây .

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

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

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

Với AngularJS 1.4 trở lên, hai dịch vụ có thể xử lý quá trình dữ liệu mã hóa url cho các yêu cầu POST, loại bỏ nhu cầu thao tác dữ liệu với transformRequesthoặc sử dụng các phụ thuộc bên ngoài như jQuery:

1. $httpParamSerializerJQLike- một serializer lấy cảm hứng từ jQuery .param()(được khuyến nghị )

2. $httpParamSerializer - một serializer được sử dụng bởi chính Angular cho các yêu cầu GET

Ví dụ sử dụng

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

Xem bản demo Plunker dài dòng hơn

Như thế nào $httpParamSerializerJQLikevà $httpParamSerializerkhác nhau

Nhìn chung, dường như $httpParamSerializersử dụng định dạng mã hóa url "truyền thống" ít hơn so với $httpParamSerializerJQLikekhi nói đến cấu trúc dữ liệu phức tạp.

Ví dụ: (bỏ qua phần trăm mã hóa của ngoặc):

• Mã hóa một mảng

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

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

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

• Mã hóa một đối tượng

{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

Tất cả những thứ này trông giống như quá mức cần thiết (hoặc không hoạt động) ... chỉ cần làm điều này:

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

Vấn đề là định dạng chuỗi JSON, Bạn có thể sử dụng chuỗi URL đơn giản trong dữ liệu:

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

Đây là cách nó phải như vậy (và xin vui lòng không thay đổi phụ trợ ... chắc chắn là không ... nếu ngăn xếp trước của bạn không hỗ trợ application/x-www-form-urlencoded, thì hãy vứt nó đi ... hy vọng AngularJS sẽ làm được!

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

Hoạt động như một bùa mê với AngularJS 1.5

Mọi người, hãy cho bạn một lời khuyên:

• sử dụng lời hứa .then(success, error)khi giao dịch $http, quên .sucessvà .errorgọi lại (vì chúng không được dùng nữa)

• Từ trang angularjs tại đây " Bạn không còn có thể sử dụng chuỗi JSON_CALLBACK làm trình giữ chỗ để chỉ định giá trị tham số gọi lại sẽ đi đâu. "

Nếu mô hình dữ liệu của bạn phức tạp hơn chỉ cần tên người dùng và mật khẩu, bạn vẫn có thể làm điều đó (như được đề xuất ở trên)

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

Tài liệu cho encodeURIComponentcó thể được tìm thấy ở đây

Nếu nó là một hình thức hãy thử thay đổi tiêu đề thành:

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

và nếu nó không phải là một hình thức và một json đơn giản thì hãy thử tiêu đề này:

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

Từ các tài liệu $ http, điều này sẽ hoạt động ..

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

bạn cần đăng đối tượng javascript đơn giản, không có gì khác

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

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

Nếu bạn có php là back-end thì bạn sẽ cần phải sửa đổi thêm .. hãy kiểm tra liên kết này để sửa lỗi phía máy chủ php

Mặc dù câu trả lời muộn, tôi thấy UrlSearchParams góc cạnh hoạt động rất tốt đối với tôi, nó cũng đảm nhiệm việc mã hóa các tham số.

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

Điều này làm việc cho tôi. Tôi sử dụng angular cho front-end và laravel php cho back-end. Trong dự án của tôi, web góc gửi dữ liệu json đến back-end laravel.

Đây là bộ điều khiển góc của tôi.

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

});

Đây là bộ điều khiển laravel back-end php của tôi.

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

Đây là định tuyến laravel của tôi

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

Kết quả trong trình duyệt là

trạng thái 200
dữ liệu JSON_CALLBACK ({"tên người dùng": "Victoria", "mật khẩu": "mật khẩu", "gọi lại": "JSON_CALLBACK"}); httpTesting.js: Hàm 18 tiêu đề (c) {a || (a = sc (b)); return c? a [K (c)] | | null: a}

Có phần mở rộng chrome được gọi là postman. Bạn có thể sử dụng để kiểm tra url back-end của mình xem nó có hoạt động hay không. https://chrom.google.com.vn/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=vi

Hy vọng, câu trả lời của tôi sẽ giúp bạn.