AngularJS の $http サービス コンテンツ
$http ショートカット メソッドを使用してサーバーと対話します
AngularJS では、ページとサーバー間の対話には主にモジュールの呼び出しが含まれます。
リクエストのタイプに応じて、$http モジュールはさまざまな呼び出しメソッドを提供します。その一般的な形式は次のとおりです。
パラメータの説明:
url: 相対または絶対のサーバーリクエストパスを示します。
リクエストタイプ: POST、GET、JSONP、DELETE、PUT、HEADの6つの一般的なリクエストメソッドが含まれます。 PUT タイプのリクエストは、オプションのパラメーター data を通じてデータを送信でき、また、オプションのパラメーター config を通じてリクエスト中に渡されるデータを設定することもできます。
$httpリクエストが成功すると、サーバーから返されたデータと関連情報をコールバックのsuccessメソッドで取得できます。
data: パラメータの戻り本体、通常はリクエストによって返される結果セットを示します。
status: リクエスト後に返されるステータス値を示します。
headers: リクエストの後に返されるヘッダー ファイルを表します。返されたリクエストのヘッダー情報を表示するために使用されます。
config: HTTP リクエストを送信するときに完全な構成情報を取得できるオブジェクトです。
$http 構成オブジェクトを使用してサーバーと対話します
上記では、/$http ショートカットを使用してサーバーと対話するプロセスを紹介しましたが、この方法は単純ですが、構成に柔軟性がなく、多くのコードが必要です。この状況に対応するには、$http サービス テンプレートを関数として使用し、XHR オブジェクトを構成するすべての設定項目をオブジェクトとして扱い、呼び出し時にそのオブジェクトを関数の仮パラメータとして定義するだけで済みます。具体的な呼び出し形式は次のとおりです。
$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请求的时间,单位是毫秒。})
例:
要件の説明:
ページにテキスト ボックス ボタンを追加します。ユーザーがテキスト ボックスに数値を入力してボタンをクリックすると、$http 関数が呼び出されてサーバーに HTTP リクエストが送信され、数値のパリティが検証され、検証結果がページ要素に表示されます。
<!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('a7_3',[]) .controller('c7_3',function($scope,$http){ $scope.num = 0; $scope.result = "偶数"; $scope.onclick = function(){ $http({ method: 'GET', url: 'data/chk.php', params:{ n: $scope.num } }).success(function(data,status,headers,config){ $scope.result = data; }) } }); </script> </body> </html>
分析:
この例の JS コードでは、ユーザーがボタンをクリックすると、ボタンにバインドされた onclick メソッドがトリガーされ、このメソッドで $http サービスが呼び出され、関数に渡されます。メソッド、URL、その他の属性値などのパラメーター。
GET リクエストが使用されるため、テキスト ボックス内の値は、params 属性を通じてキー/値の形式でサーバーに渡されます。
この例では、リクエストされた URL の最終コンテンツは
htpp://localhost/Ch7/data/chk.php?n=87 です。ここで、n はキー名、87 はキー値であり、入力された数字です。テキストボックスに。
/$http 関数が HTTP リクエストを送信すると、succes メソッドを通じてサーバーから返されるデータの内容とその他のヘッダー情報を取得できます。たとえば、data は返されるデータであり、ユーザーが に入力した数値です。テキストボックス。
Angular では、/$http 関数を実行した後、その戻り値のコンテンツは実際には Promise オブジェクトであるため、チェーン書き込みを通じて then メソッドを直接呼び出して成功データと例外データを取得できます。
次の 2 つのコードは同じ機能を持っています。
$http({//配置对象}) .succes(fn1) .error(fn2)
は
$http({//配置对象 }) .then(fn1,fn2)
と同等で、fn1 と fn2 はそれぞれリクエストの成功とエラーの戻り関数を表します。
両方の機能は同じですが。ただし、then メソッドを使用するとサーバーから完全な応答オブジェクトを受信できますが、success メソッドと error メソッドは解析および処理された応答オブジェクトのみを受信します。つまり、then メソッドで取得される戻りオブジェクトはよりオリジナルで完全なものになります。
以上がAngularJS の $http サービス コンテンツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

HTTP 301 ステータス コードの意味を理解する: Web ページ リダイレクトの一般的なアプリケーション シナリオ インターネットの急速な発展に伴い、Web ページの操作に対する人々の要求はますます高くなっています。 Web デザインの分野では、Web ページのリダイレクトは一般的かつ重要なテクノロジであり、HTTP 301 ステータス コードによって実装されます。この記事では、HTTP 301 ステータス コードの意味と、Web ページ リダイレクトにおける一般的なアプリケーション シナリオについて説明します。 HTTP301 ステータス コードは、永続的なリダイレクト (PermanentRedirect) を指します。サーバーがクライアントのメッセージを受信すると、

HTTP ステータス コード 200: 成功した応答の意味と目的を調べる HTTP ステータス コードは、サーバーの応答のステータスを示すために使用される数値コードです。このうち、ステータス コード 200 は、リクエストがサーバーによって正常に処理されたことを示します。この記事では、HTTP ステータス コード 200 の具体的な意味と使用法について説明します。まず、HTTP ステータス コードの分類を理解しましょう。ステータス コードは、1xx、2xx、3xx、4xx、5xx の 5 つのカテゴリに分類されます。このうち、2xx は成功応答を示します。 200 は 2xx で最も一般的なステータス コードです

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

HTTP リクエストがタイムアウトになり、サーバーから 504GatewayTimeout ステータス コードが返されることがよくあります。このステータス コードは、サーバーがリクエストを実行しても、リクエストに必要なリソースを取得できないか、一定時間が経過してもリクエストの処理を完了できないことを示します。これは 5xx シリーズのステータス コードで、サーバーに一時的な問題または過負荷が発生し、その結果クライアントのリクエストを正しく処理できなくなったことを示します。 HTTP プロトコルでは、さまざまなステータス コードに特定の意味と用途があり、504 ステータス コードはリクエストのタイムアウトの問題を示すために使用されます。顧客の中で

C++ で HTTP ストリーミングを実装するにはどうすればよいですか? Boost.Asio と asiohttps クライアント ライブラリを使用して、SSL ストリーム ソケットを作成します。サーバーに接続し、HTTP リクエストを送信します。 HTTP 応答ヘッダーを受信して出力します。 HTTP 応答本文を受信して出力します。

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

解決策: 1. 再試行: 一定時間待ってから再試行するか、ページを更新できます; 2. サーバーの負荷を確認します: サーバーの CPU、メモリ、およびディスクの使用状況を確認します。容量制限を超えている場合は、次のことを試してください。サーバー構成を最適化するか、サーバーの容量を増やします サーバー リソース; 3. サーバーのメンテナンスとアップグレードを確認します: サーバーが通常に戻るまで待つしかありません; 4. ネットワーク接続を確認します: ネットワーク接続が安定していることを確認し、ネットワークが正常に動作しているかどうかを確認しますデバイス、ファイアウォール、またはプロキシ設定が正しいことを確認します; 5. キャッシュまたは CDN 構成が正しいことを確認します; 6. サーバー管理者などに連絡します。
