it-swarm.com.de

Wie kann ich POST urlencodierte Formulardaten mit $ http ohne jQuery?

Ich bin neu in AngularJS, und zunächst dachte ich, eine neue Anwendung zu entwickeln, die nur AngularJS verwendet.

Ich versuche, mit $http aus meiner AJAX App einen Angular Anruf auf der Serverseite zu tätigen.

Zum Versenden 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, verwendet aber auch jQuery bei $.param. Um die Abhängigkeit von jQuery zu beseitigen, habe ich versucht:

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

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

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

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

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?

189
Veer Shrivastav

Ich denke, Sie müssen tun, um Ihre Daten von Objekt nicht in JSON-Zeichenfolge, sondern in URL-Parameter zu transformieren.

Aus Ben Nadels Blog .

Standardmäßig transformiert der $ http-Dienst die ausgehende Anforderung, indem er die Daten als JSON serialisiert und sie 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 zur Verwendung neuer Dienste, die mit AngularJS V1.4 hinzugefügt wurden, finden Sie unter

403
allenhwkim

URL-Codierungsvariablen, die nur AngularJS-Dienste verwenden

Mit AngularJS 1.4 und höher können zwei Services den Prozess der URL-Codierung von Daten für POST -Anfragen abwickeln, wodurch die Notwendigkeit entfällt, die Daten mit transformRequest zu bearbeiten oder externe Abhängigkeiten wie jQuery zu verwenden:

  1. $httpParamSerializerJQLike - ein von jQueries .param() ( empfohlen )

  2. $httpParamSerializer - ein von Angular selbst für GET-Anforderungen verwendeter Serialisierer

Beispielverwendung

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

Weitere ausführliche Plunker-Demo


Wie unterscheiden sich _$httpParamSerializerJQLike_ und _$httpParamSerializer_?

Im Allgemeinen scheint _$httpParamSerializer_ bei komplexen Datenstrukturen ein weniger "traditionelles" URL-Codierungsformat zu verwenden als _$httpParamSerializerJQLike_.

Zum Beispiel (prozentuale Kodierung von Klammern wird ignoriert):

Codierung eines Arrays

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

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

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

Kodieren 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
_
136
Boaz

All dies sieht aus wie Overkill (oder funktioniert nicht) ... mach einfach Folgendes:

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

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

So sollte es sein (und bitte keine Änderungen im Backend ... sicherlich nicht ... wenn Ihr Frontstack application/x-www-form-urlencoded nicht unterstützt, dann werfen Sie es weg ... hoffentlich tut es 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 uns einen Rat geben:

  • benutze Versprechungen .then(success, error), wenn du mit $http umgehst, vergiss .sucess und .error Rückrufe (da sie veraltet sind)

  • Von der AngularJS-Site hier " Sie können die Zeichenfolge JSON_CALLBACK nicht mehr als Platzhalter verwenden, um anzugeben, wohin der Rückrufparameterwert verschoben werden soll. "

Wenn Ihr Datenmodell komplexer ist als nur ein Benutzername und ein Passwort, können Sie dies dennoch 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 das encodeURIComponent finden Sie hier

3

Wenn es sich um ein Formular handelt, ändern Sie die Kopfzeile in:

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

wenn es sich nicht um ein Formular und einen einfachen JSON handelt, versuchen Sie diesen Header:

headers[ "Content-type" ] = "application/json";
2
V31
$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);
});
1
user8483090

In den $ http Dokumenten sollte dies funktionieren.

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

Obwohl ich eine späte Antwort erhalten habe, fand ich, dass angular UrlSearchParams für mich sehr gut funktioniert, kümmert es sich auch um die Kodierung 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();
1
vanval

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 noch einige Änderungen vornehmen. checkout this link um PHP-Server zu reparieren

1
harishr

Das hat bei mir funktioniert. Ich benutze angular für das Frontend und laravel php für das Backend. In meinem Projekt sendet angular Web JSON-Daten an das laravel Back-End.

Dies ist mein angular 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);
        });

});

Dies ist mein PHP-Back-End-Controller laravel.

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','[email protected]');

Das Ergebnis im Browser ist

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

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

ich hoffe, meine Antwort wird Ihnen helfen.

0
meazuri