Heim Web-Frontend js-Tutorial $http-Dienstinhalt in AngularJS

$http-Dienstinhalt in AngularJS

Sep 22, 2017 am 09:22 AM
angularjs http javascript

Verwenden Sie die Verknüpfungsmethode $http, um mit dem Server zu interagieren
In AngularJS umfasst die Interaktion zwischen der Seite und dem Server hauptsächlich den Aufruf von Modulen.
Abhängig vom Anforderungstyp bietet das $http-Modul unterschiedliche Aufrufmethoden. Sein allgemeines Format ist wie folgt.

Parametererklärung:
URL: Stellt einen relativen oder absoluten Serveranforderungspfad dar;
Anfragetyp: Enthält Es gibt Sechs gängige Anforderungsmethoden: POST, GET, JSONP, DELETE, PUT und HEAD. Unter diesen können Anforderungen vom Typ POST und PUT Daten über die optionalen Parameterdaten senden, und die während der Anforderung übergebenen Daten können auch über den optionalen Parameter festgelegt werden config.

Wenn die $http-Anfrage erfolgreich ist, können Sie die vom Server zurückgegebenen Daten und zugehörigen Informationen in der Erfolgsmethode des Rückrufs abrufen.
Daten: Gibt den Parameterrückgabetext an, normalerweise die von der Anforderung zurückgegebene Ergebnismenge.
status: Gibt den Statuswert an, der nach der Anfrage zurückgegeben wird.
Header: Stellt die nach der Anforderung zurückgegebene Header-Datei dar und wird zum Anzeigen der Header-Informationen der zurückgegebenen Anforderung verwendet.
config: ist ein Objekt, über das die vollständigen Konfigurationsinformationen beim Senden einer HTTP-Anfrage abgerufen werden können.

Verwenden Sie das $http-Konfigurationsobjekt, um mit dem Server zu interagieren
Oben haben wir den Prozess der Verwendung der Verknüpfung /$http für die Interaktion mit dem Server vorgestellt. Obwohl diese Methode einfach ist, mangelt es ihr an Flexibilität bei der Konfiguration und sie erfordert viel Code. Als Reaktion auf diese Situation können wir die $http-Dienstvorlage als Funktion verwenden, alle Konfigurationselemente, die das XHR-Objekt erstellen, als Objekt behandeln und das Objekt als formalen Parameter der Funktion definieren. Beim Aufruf müssen nur Änderungen vorgenommen werden Der Wert jedes Attributs ist ausreichend. Das spezifische Aufrufformat ist wie folgt.

$http({
    method: //表示请求方式,是字符串,常有POST、GET、JSONP、DELETE、PUT、HEAD六种方式
    url:    //表示向服务器请求的地址
    data:   //是一个对象,在使用POST/PUT时,该对象将作为消息体的一部分发给服务端
    params: //是字符串或对象,发送HTTP请求时,如果是对象,将自动按json格式进行序列化,并追加到url后面,作为发送数据的一部分,传递给服务器。
    transformRequest://对请求体信息和请求体进行序列化转换,并生成一个数组发送给服务端。
    transformResponse://对相应体头信息和相应体进行反序列化转换,其实质就是解析服务器发送来的被序列化后的数据。
    cache://布尔值(true/false),表示是否对http请求返回的数据进行缓存,如果设置为true,则表示需要缓存。
    timeout://表示延迟http请求的时间,单位是毫秒。})
Nach dem Login kopieren

Zum Beispiel:
Anforderungsbeschreibung:
Fügen Sie der Seite eine Textfeldschaltfläche hinzu. Wenn der Benutzer eine Zahl in das Textfeld eingibt und auf die Schaltfläche klickt, wird die Funktion $http aufgerufen, um eine HTTP-Anfrage an den Server zu senden, die Parität der Zahl zu überprüfen und das Überprüfungsergebnis im Seitenelement anzuzeigen.

<!DOCTYPE html><html ng-app="a7_3"><head>
    <meta charset="UTF-8">
    <title>使用$http配置对象方式与服务端交互</title>
    <script src="../script/angular.min.js"></script>
    <link href="Css/css7.css" rel="stylesheet" ></head><body>
    <p class="frame" ng-controller="c7_3">
        <p class="show">
            <input type="text" ng-model="num">
            <button ng-click="onclick()">验证奇偶</button>
            <p class="tip">您输入的是:{{result}}</p>
        </p>
    </p>
    <script type="text/javascript">
        angular.module(&#39;a7_3&#39;,[])
            .controller(&#39;c7_3&#39;,function($scope,$http){
                $scope.num = 0;
                $scope.result = "偶数";
                $scope.onclick = function(){
                    $http({
                        method: &#39;GET&#39;,
                        url: &#39;data/chk.php&#39;,
                        params:{
                            n: $scope.num
                        }
                    }).success(function(data,status,headers,config){
                        $scope.result = data;
                    })
                }
            });    
      </script>
    </body>          
 </html>
Nach dem Login kopieren

Analyse:
Wenn der Benutzer im js-Code dieses Beispiels auf die Schaltfläche klickt, wird die Onclick-Methode der Schaltflächenbindung ausgelöst. In dieser Methode $ wird als http-Dienst bezeichnet und Parameter in Form von Konfigurationsobjekten wie Methode, URL und anderen Attributwerten an die Funktion übergeben.
Da die GET-Anfrage verwendet wird, wird der Wert im Textfeld in Form von übergeben Schlüssel/Wert über das params-Attribut an den Server übertragen.
In diesem Beispiel ist der endgültige Inhalt der angeforderten URL
htpp://localhost/Ch7/data/chk.php?n=87, wobei n der Schlüsselname und 87 der Schlüsselwert ist ist das Textfeld, in das die Nummer eingegeben wurde.

Wenn die Funktion /$http eine HTTP-Anfrage sendet, können Sie den Dateninhalt und andere vom Server zurückgegebene Header-Informationen über die Methode „succes“ abrufen. Daten sind beispielsweise die zurückgegebenen Daten, also die eingegebene Zahl vom Benutzer im Textfeld eingegeben werden.

In Angular ist der zurückgegebene Inhalt nach der Ausführung der Funktion /$http tatsächlich ein Versprechensobjekt. Daher können Sie die Then-Methode direkt durch Kettenschreiben aufrufen, um Erfolgs- und Ausnahmedaten zu erhalten.

Die folgenden zwei Codeteile haben die gleiche Funktion.

$http({//配置对象})
.succes(fn1)
.error(fn2)
Nach dem Login kopieren

entspricht

$http({//配置对象
})
.then(fn1,fn2)
Nach dem Login kopieren

fn1 und fn2 repräsentieren die Rückgabefunktionen für den Erfolg bzw. Fehler der Anforderung.
Obwohl die Funktionen beider gleich sind. Allerdings kann die Methode then das vollständige Antwortobjekt vom Server empfangen, während die Erfolgs- und Fehlermethoden nur das analysierte und verarbeitete Antwortobjekt empfangen, was bedeutet, dass das von der Methode then erhaltene Rückgabeobjekt origineller und vollständiger ist.

Das obige ist der detaillierte Inhalt von$http-Dienstinhalt in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Verstehen Sie gängige Anwendungsszenarien der Webseitenumleitung und verstehen Sie den HTTP-301-Statuscode Verstehen Sie gängige Anwendungsszenarien der Webseitenumleitung und verstehen Sie den HTTP-301-Statuscode Feb 18, 2024 pm 08:41 PM

Verstehen Sie die Bedeutung des HTTP 301-Statuscodes: Häufige Anwendungsszenarien der Webseitenumleitung. Mit der rasanten Entwicklung des Internets werden die Anforderungen der Menschen an die Webseiteninteraktion immer höher. Im Bereich Webdesign ist die Webseitenumleitung eine gängige und wichtige Technologie, die über den HTTP-301-Statuscode implementiert wird. In diesem Artikel werden die Bedeutung des HTTP 301-Statuscodes und häufige Anwendungsszenarien bei der Webseitenumleitung untersucht. Der HTTP-Statuscode 301 bezieht sich auf eine permanente Weiterleitung (PermanentRedirect). Wenn der Server die des Clients empfängt

HTTP 200 OK: Verstehen Sie die Bedeutung und den Zweck einer erfolgreichen Antwort HTTP 200 OK: Verstehen Sie die Bedeutung und den Zweck einer erfolgreichen Antwort Dec 26, 2023 am 10:25 AM

HTTP-Statuscode 200: Erkunden Sie die Bedeutung und den Zweck erfolgreicher Antworten. HTTP-Statuscodes sind numerische Codes, die den Status einer Serverantwort angeben. Darunter zeigt der Statuscode 200 an, dass die Anfrage vom Server erfolgreich verarbeitet wurde. In diesem Artikel wird die spezifische Bedeutung und Verwendung des HTTP-Statuscodes 200 untersucht. Lassen Sie uns zunächst die Klassifizierung von HTTP-Statuscodes verstehen. Statuscodes sind in fünf Kategorien unterteilt, nämlich 1xx, 2xx, 3xx, 4xx und 5xx. Unter diesen zeigt 2xx eine erfolgreiche Antwort an. Und 200 ist der häufigste Statuscode in 2xx

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Wie implementiert man HTTP-Streaming mit C++? Wie implementiert man HTTP-Streaming mit C++? May 31, 2024 am 11:06 AM

Wie implementiert man HTTP-Streaming in C++? Erstellen Sie einen SSL-Stream-Socket mit Boost.Asio und der asiohttps-Clientbibliothek. Stellen Sie eine Verbindung zum Server her und senden Sie eine HTTP-Anfrage. Empfangen Sie HTTP-Antwortheader und drucken Sie sie aus. Empfängt den HTTP-Antworttext und gibt ihn aus.

Welcher Statuscode wird bei einem HTTP-Anfrage-Timeout zurückgegeben? Welcher Statuscode wird bei einem HTTP-Anfrage-Timeout zurückgegeben? Feb 18, 2024 pm 01:58 PM

Die HTTP-Anfrage läuft ab und der Server gibt häufig den Statuscode 504GatewayTimeout zurück. Dieser Statuscode zeigt an, dass der Server bei der Ausführung einer Anforderung immer noch nicht in der Lage ist, die für die Anforderung erforderlichen Ressourcen abzurufen oder die Verarbeitung der Anforderung nach einer gewissen Zeit nicht abzuschließen. Es handelt sich um einen Statuscode der 5xx-Reihe, der darauf hinweist, dass beim Server ein vorübergehendes Problem oder eine Überlastung aufgetreten ist, was dazu führt, dass die Anfrage des Clients nicht korrekt verarbeitet werden kann. Im HTTP-Protokoll haben verschiedene Statuscodes spezifische Bedeutungen und Verwendungszwecke, und der Statuscode 504 wird verwendet, um Probleme mit der Zeitüberschreitung von Anfragen anzuzeigen. im Kunden

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

So beheben Sie den HTTP 503-Fehler So beheben Sie den HTTP 503-Fehler Mar 12, 2024 pm 03:25 PM

Lösung: 1. Wiederholen: Sie können eine Weile warten und es erneut versuchen, oder die Seite aktualisieren. 2. Überprüfen Sie die Serverauslastung: Überprüfen Sie die CPU-, Speicher- und Festplattenauslastung. Wenn die Kapazitätsgrenze überschritten ist, können Sie es versuchen um die Serverkonfiguration zu optimieren oder die Serverressourcen zu erhöhen: Sie können nur warten, bis der Server wieder normal ist. 4. Überprüfen Sie die Netzwerkverbindung. Überprüfen Sie, ob das Netzwerk stabil ist Geräte-, Firewall- oder Proxy-Einstellungen sind korrekt; 5. Stellen Sie sicher, dass die Cache- oder CDN-Konfiguration korrekt ist. 6. Wenden Sie sich an den Serveradministrator usw.

See all articles