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 の左右レイアウトのサンプルコード
CS: ...コードをコピーコードは次のとおりです。 html,body{ margin:0px; ...
Nodejs モジュール システムのソースコード分析
目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...
Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します
目次プロジェクトにmockjsをインストールするVueプロジェクトでmockjsを使用する基本的なプ...
よく使われる HTML タグとその特徴の完全なリスト
まず、HTML タグのいくつかの特性を知っておく必要があります。 1. 「<keyword&g...
MySQLとOracleの違いを簡単に説明してください
1. Oracle は大規模データベースですが、MySQL は小規模から中規模のデータベースです。O...
Navicateを使用してAlibaba Cloud Server上のMySQLに接続する
1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...
JSメモリ空間の詳細な説明
目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...
フレックスレイアウトとposition:absolute/fixedの競合の詳細な説明
以前、プロジェクトを開発しているときに、flex レイアウトと position:absolute/...
サブクエリ最適化における MySQL 選択の実装
以下のデモはMySQLバージョン5.7.27に基づいています。 1. MySQLサブクエリ最適化戦略...
ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します。
ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...
Hyper-v仮想マシンを使用してCentos7をインストールする
目次導入準備するシステムイメージをダウンロードHyper-Vを有効にする新しい仮想ネットワークスイッ...
Linux インストール Redis 実装プロセスとエラー解決
今日、redis をインストールしたところ、今までになかったいくつかのエラーが発生しました。ここで記...
Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする
MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...
TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています
1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...
CSS変数を使用してダークモードを実装するためのサンプルコード
最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...