Ich bin neu in AngularJS und dachte zunächst daran, eine neue Anwendung nur mit AngularJS zu entwickeln.
Ich versuche, über $http
meine 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?
javascript
jquery
angularjs
ajax
angularjs-http
Veer Shrivastav
quelle
quelle
$http({method: 'post', url: URL, data: {username: $scope.userName, password: $scope.password}});
$scope.userName
definiert? Warum hast du es nicht versuchtdata: data
?Antworten:
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 .
Beispiel von hier .
AKTUALISIEREN
Informationen zum Verwenden neuer Dienste, die mit AngularJS V1.4 hinzugefügt wurden, finden Sie unter
quelle
angular.element
, können Sie einfachreturn angular.element.param(obj);
var obj = {a: 1, b: 2}; Object.keys(obj).reduce(function(p, c) { return p.concat([encodeURIComponent(c) + "=" + encodeURIComponent(obj[c])]); }, []).join('&');
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
transformRequest
oder mit externen Abhängigkeiten wie jQuery bearbeitet werden müssen :$httpParamSerializerJQLike
- ein von jQuery's inspirierter Serializer.param()
( empfohlen )$httpParamSerializer
- Ein Serializer, der von Angular selbst für GET-Anforderungen verwendet wirdAnwendungsbeispiel
Sehen Sie sich eine ausführlichere Plunker-Demo an
Wie
$httpParamSerializerJQLike
und$httpParamSerializer
andersIm Allgemeinen scheint es
$httpParamSerializer
weniger "traditionelles" URL-Codierungsformat zu verwenden als$httpParamSerializerJQLike
bei komplexen Datenstrukturen.Zum Beispiel (Ignorieren der prozentualen Codierung von Klammern):
• Codierung eines Arrays
• Codieren eines Objekts
quelle
$http.({...
statt sein$http.post({...
All dies sieht nach Overkill aus (oder funktioniert nicht) ... machen Sie einfach Folgendes:
quelle
Das Problem ist das JSON-Zeichenfolgenformat. Sie können eine einfache URL-Zeichenfolge in Daten verwenden:
quelle
encodeURIComponent($scope.userName)
, um die Daten per URL zu codieren, oder Ihre Parameter werden beschädigt, wenn der Benutzer einen Wert wie"&myCustomParam=1"
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!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.sucess
und.error
Rü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).
Dokument für die
encodeURIComponent
finden Sie hierquelle
Wenn es sich um ein Formular handelt, ändern Sie den Header in:
und wenn es kein Formular und kein einfacher JSON ist, versuchen Sie diesen Header:
quelle
$_POST
Array erhalten.!quelle
Von den $ http- Dokumenten sollte dies funktionieren.
quelle
headers
keine Auswirkungen auf das hat,data
was auf die eine oder andere Weise noch urlencodiert werden muss.Sie müssen ein einfaches Javascript-Objekt posten, sonst nichts
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
quelle
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.
quelle
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.
Dies ist mein PHP-Backend-Laravel-Controller.
Dies ist mein Laravel-Routing
Das Ergebnis im Browser ist
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.
quelle