Як я розміщую форми форми, кодовані urlenc, за допомогою $ http без jQuery?

Я новачок у AngularJS, і для початку я думав розробити нову програму, використовуючи лише AngularJS.

Я намагаюся здійснити дзвінок AJAX на сторону сервера, використовуючи $httpмою програму Angular.

Для надсилання параметрів я спробував наступне:

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

Це працює, але він також використовує jQuery $.param. Для усунення залежності від jQuery я спробував:

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

але це здавалося невдалим. Потім я спробував params:

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

але це також здавалося невдалим. Потім я спробував JSON.stringify:

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

Я знайшов ці можливі відповіді на свій квест, але не вдався. Чи я щось роблю не так? Я впевнений, що AngularJS забезпечив би цю функціональність, але як?

Я думаю, що вам потрібно зробити, це перетворити ваші дані з об’єкта не в рядок JSON, а в параметри URL-адреси.

З блогу Бена Наделя .

За замовчуванням служба $ http перетворює вихідний запит шляхом серіалізації даних у вигляді JSON, а потім розміщує їх із типом вмісту "application / json". Коли ми хочемо розмістити значення як пост FORM, нам потрібно змінити алгоритм серіалізації та розмістити дані із типом контенту, "application / x-www-form-urlencoded".

Приклад тут .

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

ОНОВЛЕННЯ

Щоб використовувати нові сервіси, додані з AngularJS V1.4, див

• Змінні кодування URL-адрес, що використовують лише сервіси AngularJS

Змінні кодування URL-адрес, що використовують лише сервіси AngularJS

З AngularJS 1.4 і вище два сервіси можуть обробляти процес кодування URL-адреси для POST-запитів, виключаючи необхідність маніпулювати даними transformRequestабо використовувати зовнішні залежності, такі як jQuery:

1. $httpParamSerializerJQLike- серіалізатор, натхненний jQuery's .param()( рекомендується )

2. $httpParamSerializer - серіалізатор, використовуваний самим Angular для GET-запитів

Приклад використання

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

Перегляньте докладнішу демонстрацію Plunker

Як бувають $httpParamSerializerJQLikeі $httpParamSerializerрізні

Загалом, схоже, $httpParamSerializerвикористовується менш "традиційний" формат кодування URL, ніж $httpParamSerializerJQLikeколи мова йде про складні структури даних.

Наприклад (ігнорування відсоткового кодування дужок):

• Кодування масиву

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

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

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

• Кодування об’єкта

{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

Все це виглядає як надмірне (або не працює) ... просто так:

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

Проблема полягає у форматі рядка JSON. Ви можете використовувати просту URL-адресу рядка в даних:

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

Ось так воно і повинно бути (і, будь ласка, жодних змін у бекендінгу ... звичайно, ні ... якщо ваш передній стек не підтримує application/x-www-form-urlencoded, тоді викиньте його ... сподіваємось, AngularJS це робить!

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

Працює як шарм з AngularJS 1.5

Люди, дайте вам кілька порад:

• використовувати обіцянки .then(success, error)під час роботи $http, забудьте про зворотній зв'язок .sucessта .errorзворотній зв'язок (оскільки вони застаріли)

• З сайту angularjs тут " Ви більше не можете використовувати рядок JSON_CALLBACK як заповнювач, щоб вказати, куди повинно йти значення параметра зворотного виклику. "

Якщо ваша модель даних є більш складною, ніж просто ім’я користувача та пароль, ви все одно можете це зробити (як запропоновано вище)

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

З документом encodeURIComponentможна ознайомитись тут

Якщо це форма, спробуйте змінити заголовок на:

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

а якщо це не форма та простий json, спробуйте цей заголовок:

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

З документів $ http це має працювати.

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

вам потрібно розмістити звичайний об’єкт javascript, більше нічого

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

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

якщо у вас є PHP як бек-енд, вам знадобиться зробити ще одну модифікацію .. перевірте це посилання для виправлення сторони сервера PHP

Хоча пізня відповідь, я виявив, що кутові UrlSearchParams дуже добре спрацювали для мене, він також піклується про кодування параметрів.

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

Це працювало для мене. Я використовую angular для переднього та laravel php для back-end. У моєму проекті кутова веб-адреса передає дані json в backrand laravel.

Це мій кутовий контролер.

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

});

Це мій контролер PHP-зворотного рівня laravel.

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

Це моя маршрутизація laravel

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

Результат у браузері -

статус 200
даних JSON_CALLBACK ({"ім'я користувача": "Вікторія", "пароль": "пароль", "зворотний дзвінок": "JSON_CALLBACK"}); httpTesting.js: функція 18 заголовків (c) {a || (a = sc (b)); повернути c? a [K (c)] || null: a}

Існує хромоване розширення, яке називається листоношею. Ви можете використовувати для тестування вашого бек-енд-адреси, працює він чи ні. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=en

сподіваюся, моя відповідь допоможе тобі.