Как получить данные POST с urlencoded с помощью $ 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 params.

Из блога Бена Наделя .

По умолчанию служба $ 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 

Все они выглядят как overkill (или не работают) … просто выполните это:

 $http.post(loginUrl, "userName=" + encodeURIComponent(email) + "&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 обратных .sucess (поскольку они устарели)

  • С сайта 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 можно найти здесь

Из $ http docs это должно работать.

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

Если это форма, попробуйте изменить заголовок на:

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

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

 headers[ "Content-type" ] = "application/json"; 

вам нужно опубликовать простой объект javascript, ничего другого

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

если у вас есть php как back-end, тогда вам нужно будет сделать еще несколько изменений .. проверьте эту ссылку для исправления 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(); 
 $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); }); 

Это сработало для меня. Я использую угловой для front-end и laravel php для back-end. В моем проекте угловая сеть отправляет данные json в laravel back-end.

Это мой угловой controller.

 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 back-end laravel controller.

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

Это моя маршрутная маршрутизация

 Route::post('httpTest','[email protected]'); 

Результат в браузере

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

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

надеюсь, мой ответ поможет вам.

  • Изменить элемент активного меню на странице прокрутки?
  • JQuery: определить, нажата ли нажата средняя или правая кнопка мыши, если да, сделайте следующее:
  • Приложение jquery не работает с элементом svg?
  • jQuery validate plugin: принимать буквы только?
  • Как установить кеш: false в вызове jQuery.get
  • Как получить идентификатор fragmentа (значение после hashа #) из URL-адреса?
  • jQuery не работает после загрузки содержимого через AJAX
  • jQuery $ .ajax (), $ .post отправляет «ОПЦИИ» как REQUEST_METHOD в Firefox
  • JQuery сортировка «элемент» позиции события
  • Сортируемые списки JQuery и фиксированные / заблокированные элементы
  • Отправить форму с помощью AJAX и jQuery
  • Давайте будем гением компьютера.