Cross-Domain, ein häufiges Problem in der Front-End-Entwicklung. AngularJS implementiert die Kreuzdomänenmethode ähnlich wie AJAX und verwendet den CORS-Mechanismus.
Im Folgenden werden die Verwendung von $ http zur Implementierung von Cross-Domänen-Anforderungsdaten in AngularJS erläutert.
AngularJS XMLHTTPREQUEST: $ HTTP wird verwendet, um Daten von einem Remote -Server zu lesen
$ http.post (url, data, [config]). success (function () {...});1. $ http.jsonp [Implementierung von Cross-Domain]
1. Geben Sie callback und Rückruf an. Wenn der Funktionsname JSON_CALLBACK ist, wird die Erfolgs -Rückruffunktion aufgerufen. JSON_CALLBACK muss in Großbuchstaben sein.
2. Geben Sie andere Rückruffunktionen an, müssen jedoch globale Funktionen sein, die im Fenster definiert sind. callback muss der URL hinzugefügt werden.
2. $ http.get [Implementierung von Cross-Domain]
1. Stellen Sie den Server fest, um den Zugriff unter anderen Domänennamen zuzulassen
response.setheader ("Access-Control-Allow-Origin", "*"); // Erlauben Sie, dass alle Domain-Namen auf Antwort zugreifen. // Erlauben Sie www.123.com zugreifen 2. Angularjs Seite verwendet $http.get()
3.. $ Http.post [Implementierung von Cross-Domain]
1. Stellen Sie die serverseitigen Einstellungen ein, um den Zugriff unter anderen Domänennamen sowie Antworttyp- und Antwort-Header-Einstellungen zu ermöglichen
Response.Setheader ("Access-Control-Allow-Origin", "*"); Reaktion.Setheader ("Access-Control-Allow-Methoden", "post"); Reaktion.setheader ("Zugriffskontroll-Owl-Header", "x-requestal-with-with, content-type"); 2. AngularJS Side verwendet $http.post() und legt die Anforderungsheaderinformationen gleichzeitig fest
$ http.post ('http: //localhost/ajax/getallindustrycategoty.pt', {languageColumn: 'name_eu'}, {'content-type': 'application/x-www-form-urlencoded'}).4. Implementierungsmethode
Cross-Domain-Methode eins [ JSONP ]:
Methode 1:
$ http.jsonp ("http: //localhost/sitesettings/getbadgeinfo.pt? Methode 2 [Rückgabewert, Sie müssen die entsprechende Rückrufmethode verwenden, um sie zu empfangen, aber wie Sie sie in $scope einfügen?]:
$ http.jsonp ("http: //localhost/sitesettings/getbadgeInfo.pt? jsonp = badgeabc & sitId = 137bd406"); response.setheader ("", ""); SiteHandlerAction SiteHandleraction = (SiteHandlerAction) Beansfactory.getbean (SiteHandlerAction.Class); BadergeandlerAction badgeHandlerAction = (BadGehandlerAction) Beansfactory.getbean (BadGehandlerAction.Class); if ("". Equals (SiteID) || } else {Site Site = SiteHandlerAction.find (SiteId); UserBadgestatus userBadgestatus = badgeHandlerAction.getUserBadgestatus (Site.getId ()); if (userBadgestatus! JsonObject jsonObj = jsonObject.fromObject (Ergebnis); String json = jsonobj.toString (); result = jsonp + "(" + json + ")"; }} Printwriter write = response.getWriter (); write.print (Ergebnis); write.flush (); write.close (); keine zurückgeben;} Cross-Domain-Methode zwei [ $http.get() ]:
Funktion getadustryController ($ scope, $ http) {$ http.get ('http: //localhost/ajax/getallindustrycategoty.pt? LanguageColumn = name_eu') .success (function (Data) {$ scope.industries = Data;}); Cross-Domain-Methode drei [ $http.post() ]:
Funktion getadustryController ($ scope, $ http) { $ http.post ('http: //localhost/ajax/getallindustrycategoty.pt', {LanguageColumn: 'name_eu'}, {'content-type': 'application/x-www-form-urlencoded'}). Java Side unterstützt Cross-Domain-Anfragen öffentlicher String execute () {response.setheader ("Access-Control-Owl-Origin", "*"); // Welche URLs dürfen Domänen über die Antwort anfordern. // Die zulässigen Anforderungsmethoden sind im Allgemeinen erhalten, postieren, löschen, Optionen reagieren. // Welche Anfrage -Header dürfen erlaubt seinKann Cross-Domain
SiteHandlerAction SiteHandler = (SiteHandlerAction) Beansfactory.getBean (SiteHandlerAction.Class); Listlist = siteHandler.getallindustryCategory (); // Alle Klassifizierungssammlungen jsonArray jsonArray = jsonArray.fromObject (Liste); // Die Liste in JSonstring JSON = jsonArray.toString () konvertieren; // in JSON String versuchen {printwriter write = response.getWriter (); write.print (json); write.close ();} catch (ioException e) {e.printstacktrace ();} return keine;}Zusammenfassen
Das obige dreht sich alles um diesen Artikel. Ich hoffe, der Inhalt dieses Artikels wird für alle hilfreich sein, um AngularJs zu verwenden.