JavaScriptを使用して独自のAjax関数を定義する
|
ネイティブJSによって開始されたネットワークリクエストは、クエリ文字列の形でサーバーに送信されるため、ユーザーがオブジェクトの形でパラメーターを送信する方が便利であるため、ユーザーが渡すパラメーターオブジェクトを処理し、Resolvedata関数を定義し、正式なパラメーターを設定してパラメーターを受け取ります＆アレイの各項目を分割して、イサイマ関数を定義し、XHRオブジェクトを作成し、パラメーターを処理する関数に渡され、等式を削除するかどうかを確認します渡されたパラメーターは小文字である可能性があります。これらは、条件を満たしている場合、対応する値を埋め、送信済みのポストを呼び出します。最後に、リスニング イベントを呼び出します。
関数resolveData(データ) {
var arr = [];
(var k in data) の場合 {
var str = k + "=" + データ[k];
arr.push(文字列)
}
arr.join("&") を返します
}
関数 itheima(オプション) {
var xhr = 新しい XMLHttpRequest();
var qs = 解決データ(options.data);
if (options.method.toUpperCase() === "GET") {
xhr.open(options.method, options.url + "?" + qs);
xhr.send();
} そうでない場合、options.method.toUpperCase() === "POST"){
xhr.open(オプション.メソッド、オプション.url)
xhr.setRequestHeader("コンテンツタイプ","application/x-www-form-urlencoded")
xhr.send(qs)
}
xhr.onreadystatechange = 関数 () {
xhr.readyState === 4 && xhr.status === 200 の場合 {
var 結果 = JSON.parse(xhr.responseText)
オプション.成功(結果);
}
}
}最後に成功するかテストします〜
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
<title>テストインターフェース</title>
<script src="itheima.js"></script>
</head>
<本文>
<スクリプト>
イテイマ（{
メソッド:"GET",
url:"http://www.liulongbin.top:3006/api/getbooks",
データ：{
id:1
},
成功:function(res){
コンソールログ(res);
}
});
</スクリプト>
</本文>
</html>
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Flex レイアウトで適応型ページを作成する (構文と例)
推薦する
HTML を使用して IE8 および IE9 の互換表示モードを無効にするヒント
IE 8 以降では互換モードが追加され、これを有効にすると IE の下位バージョンでレンダリングされ...
Harborを使用してプライベートDockerリポジトリを構築する方法
目次1. オープンソースの倉庫管理ツール Harbor 2 インストール2.1 DockerとDoc...
CSS カウンターを使用して数字の順序付きリストを美しく表示する方法
Web デザインでは、Web サイトに表示されるデータの構造とコンテンツをユーザーが明確に理解できる...
MySQL における count(*)、count(1)、count(col) の違いのまとめ
序文count 関数は、テーブルまたは配列内のレコードをカウントするために使用されます。count(...
Docker で LNMP 環境を素早く構築する方法 (最新)
序文ヒント: ここで、この記事に記録するおおよその内容を追加できます。例えば、人工知能の継続的な発展...
CSS3 で画像ドロワー効果を実装するためのサンプル コード
いつものように、まずは画像効果を投稿しましょう: このエフェクトの原理は非常にシンプルです。CSS3...
Vue プロジェクトに Electron を追加するための詳細なコード
1. package.jsonに追加する "メイン": "electr...
カレンダー効果を実現するJavaScript
この記事では、カレンダー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
Winにmysqlをインストールする詳細な手順
この記事では、参考までにWinにmysqlをインストールする詳細な手順を紹介します。具体的な内容は次...
IIS 7.5では、HTMLはSHTMLのようなinclude関数（モジュールマッピングの追加）をサポートします。
最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...
Javascript で関数のカリー化とデカリー化を実装する方法
関数のカリー化（黒い疑問符の顔）？ ? ?カレー（黒い疑問符の顔）？ ? ?これは完璧な中国語翻訳で...
Linux で FastDFS ファイル サーバーを構築するための実装手順
目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...
アバターと国旗の統合を実現する1行のCSSコード
今日は建国記念日で、誰もが祖国の誕生日をお祝いしようとしています。毎年この時期になると、WeChat...
CSS で div にスクロールを追加し、スクロール バーを非表示にする
CSS は div にスクロールを追加し、スクロール バーを非表示にします。具体的なコードは次のとお...
最小限のルートファイルシステムを構築するためにbusyboxを移植するための詳細な手順
Busybox: 小さなコマンドが詰まったスイスアーミーナイフ。ステップ1: ディレクトリ構造を作成...