Wie poste ich urlencodierte Formulardaten mit $ http ohne jQuery?

Ich bin neu in AngularJS und dachte zunächst daran, eine neue Anwendung nur mit AngularJS zu entwickeln.

Ich versuche, über $httpmeine Angular-App einen AJAX-Anruf auf der Serverseite zu tätigen .

Zum Senden der Parameter habe ich Folgendes versucht:

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

Dies funktioniert, aber es wird auch jQuery bei verwendet $.param. Um die Abhängigkeit von jQuery zu entfernen, habe ich versucht:

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

aber das schien zu scheitern. Dann habe ich versucht params:

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

aber das schien auch zu scheitern. Dann habe ich versucht JSON.stringify:

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

Ich fand diese möglichen Antworten auf meine Suche, war aber erfolglos. Mache ich etwas falsch? Ich bin sicher, AngularJS würde diese Funktionalität bereitstellen, aber wie?

Ich denke, Sie müssen Ihre Daten vom Objekt nicht in eine JSON-Zeichenfolge, sondern in URL-Parameter umwandeln.

Aus dem Blog von Ben Nadel .

Standardmäßig transformiert der $ http-Dienst die ausgehende Anforderung, indem er die Daten als JSON serialisiert und dann mit dem Inhaltstyp "application / json" veröffentlicht. Wenn wir den Wert als FORM-Beitrag veröffentlichen möchten, müssen wir den Serialisierungsalgorithmus ändern und die Daten mit dem Inhaltstyp "application / x-www-form-urlencoded" veröffentlichen.

Beispiel von hier .

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

AKTUALISIEREN

Informationen zum Verwenden neuer Dienste, die mit AngularJS V1.4 hinzugefügt wurden, finden Sie unter

• URL-Codierungsvariablen, die nur AngularJS-Dienste verwenden

URL-Codierungsvariablen, die nur AngularJS-Dienste verwenden

Mit AngularJS 1.4 und höher können zwei Dienste den Prozess der URL-Codierung von Daten für POST-Anforderungen übernehmen, sodass keine Daten mit transformRequestoder mit externen Abhängigkeiten wie jQuery bearbeitet werden müssen :

1. $httpParamSerializerJQLike- ein von jQuery's inspirierter Serializer .param()( empfohlen )

2. $httpParamSerializer - Ein Serializer, der von Angular selbst für GET-Anforderungen verwendet wird

Anwendungsbeispiel

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

Sehen Sie sich eine ausführlichere Plunker-Demo an

Wie $httpParamSerializerJQLikeund $httpParamSerializeranders

Im Allgemeinen scheint es $httpParamSerializerweniger "traditionelles" URL-Codierungsformat zu verwenden als $httpParamSerializerJQLikebei komplexen Datenstrukturen.

Zum Beispiel (Ignorieren der prozentualen Codierung von Klammern):

• Codierung eines Arrays

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

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

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

• Codieren eines Objekts

{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

All dies sieht nach Overkill aus (oder funktioniert nicht) ... machen Sie einfach Folgendes:

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

Das Problem ist das JSON-Zeichenfolgenformat. Sie können eine einfache URL-Zeichenfolge in Daten verwenden:

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

Hier ist, wie es sein sollte (und bitte keine Änderungen am Backend ... schon gar nicht ... wenn Ihr Frontstack nicht unterstützt application/x-www-form-urlencoded, dann werfen Sie es weg ... hoffentlich 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
 });

Funktioniert wie ein Zauber mit AngularJS 1.5

Leute, lasst euch einen Rat geben:

• Verwenden Sie Versprechen .then(success, error)beim Umgang mit $http, Vergessen .sucessund .errorRückrufen (da diese veraltet sind).

• Von der Website anglejs hier " Sie können die Zeichenfolge JSON_CALLBACK nicht mehr als Platzhalter verwenden, um anzugeben, wohin der Wert des Rückrufparameters gehen soll. "

Wenn Ihr Datenmodell komplexer ist als nur ein Benutzername und ein Passwort, können Sie dies trotzdem tun (wie oben vorgeschlagen).

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

Dokument für die encodeURIComponentfinden Sie hier

Wenn es sich um ein Formular handelt, ändern Sie den Header in:

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

und wenn es kein Formular und kein einfacher JSON ist, versuchen Sie diesen Header:

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

Von den $ http- Dokumenten sollte dies funktionieren.

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

Sie müssen ein einfaches Javascript-Objekt posten, sonst nichts

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

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

Wenn Sie PHP als Back-End haben, müssen Sie weitere Änderungen vornehmen. Schauen Sie sich diesen Link an, um die PHP-Serverseite zu reparieren

Obwohl eine späte Antwort, fand ich, dass eckige UrlSearchParams für mich sehr gut funktionierten, kümmert es sich auch um die Codierung von Parametern.

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

Das hat bei mir funktioniert. Ich benutze eckig für Front-End und Laravel PHP für Back-End. In meinem Projekt sendet Angular Web JSON-Daten an das Laravel-Backend.

Das ist mein Winkelregler.

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

});

Dies ist mein PHP-Backend-Laravel-Controller.

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

Dies ist mein Laravel-Routing

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

Das Ergebnis im Browser ist

Status 200
Daten JSON_CALLBACK ({"Benutzername": "Victoria", "Passwort": "Passwort", "Rückruf": "JSON_CALLBACK"}); httpTesting.js: 18 Header-Funktion (c) {a || (a = sc (b)); Rückgabe c? a [K (c)] || null: a}

Es gibt eine Chrom-Erweiterung namens Postman. Sie können damit Ihre Back-End-URL testen, ob sie funktioniert oder nicht. https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm?hl=de

Hoffentlich hilft Ihnen meine Antwort.