各 Jquery Ajax 関数の詳細な解釈:
$.get()、$.post()、$.ajax()、$.getJSON()
1, $.get(url,[data],[callback])
説明: url はリクエストのアドレス、data はリクエストされたデータのリスト、callback はリクエストが成功した後のコールバック関数です。この関数は 2 つのパラメータを受け入れます。1 つ目はサーバーから返されたデータで、2 つ目はサーバーから返されたデータです。パラメータはサーバーのステータスであり、オプションのパラメータです。
このうち、サーバーから返されるデータの形式は実際には文字列形式であり、ここでは比較と説明のために引用しています。
$("#getResponse").html(data) }//返されるデータは文字列型です
);
説明: この関数は $.get() パラメーターに似ていますが、type パラメーターは要求されたデータ型であり、html、xml、json などになります。このパラメーターを json に設定すると、設定されていない場合、$.get() によって返される形式と同じになります。これは文字列
},"json"//取得するデータの型を設定し、取得するデータ形式はjson型となります
);
データ:{フル:"fu"}、
タイプ: "POST"、
dataType:'json',
成功:コールバック、
エラー:関数(er){
BackErr(er);}
});
);
Ajax と jQuery の出会い AJAX ベースのアプリケーションはますます増えており、フロントエンド開発者にとって、基礎となる HTTPRequest の問題に直接対処するのは快適ではありません。 jQuery は JavaScript をカプセル化するため、AJAX アプリケーションを考慮する必要があります。実際、jQuery を使用して AJAX を記述すると、JS で直接記述するよりも N 倍便利になります。 (長い間 jQuery を使っていると、JS の知識が失われるのではないかと思います...) ここでは、誰もが jQuery の構文に精通していることを前提として、ajax のいくつかの応用例をいくつかまとめます。
load( url, [data], [callback] );
url (String) リクエストされた HTML ページの URL アドレスdata (Map) (オプションのパラメーター) サーバーに送信されるキー/値データ
callback (Callback) (オプションのパラメータ) リクエストが完了したときのコールバック関数 (成功する必要はありません)
load() メソッドは、静的ページのコンテンツを指定された jQuery オブジェクトに簡単にロードできます。
get( url, [data], [callback] )
url (文字列) リクエストを送信する URL アドレス。
data (Map) (オプションのパラメーター) サーバーに送信されるデータ、 with Key/ ロードが成功した場合、キーと値のペア形式の値が QueryString
callback (Callback) (オプションのパラメーター) コールバック関数としてリクエスト URL に追加されます (このメソッドは、Response の戻りステータスが成功)
明らかに、これは GET メソッドを具体的に実装する関数であり、使用するのは非常に簡単です
url (文字列) リクエストを送信する URL アドレス。
data (Map) (オプションのパラメーター) サーバーに送信されるデータ。キーと値のペアの形式で表現されます。
callback (コールバック) (オプションのパラメータ) ロード成功時のコールバック関数 (このメソッドはResponseの戻りステータスが成功の場合にのみ呼び出されます)
type (String) (オプションのパラメータ) リクエストされたデータのタイプ、xml、text、jsonなど
も jQuery が提供する単純な関数です。その使用法は
url (文字列) ロードする JS ファイルのアドレス
callback (関数) (オプション) ロード成功後のコールバック関数
JSON は理想的なデータ送信形式であり、JavaScript や他のホスト言語とうまく統合でき、JS で直接使用できます。 JSON を使用することは、従来の GET および POST を通じて「ヌード」データを直接送信するよりも構造的に合理的で安全です。 jQuery の getJSON() 関数に関しては、JSON パラメーターが設定された ajax() 関数の単純化されたバージョンにすぎません。この関数はドメイン間で使用することもでき、get() や post() に比べて特定の利点があります。さらに、この関数はリクエスト URL を「myurl?callback=X」の形式で記述することで、プログラムにコールバック関数 X を実行させることができます。
コードをコピー
ajax( options )
ajax()提供了一大票参数，所以可以实现相当复杂的功能。
| 参数名 | 类型 | 描述 |
| url | String | (默认: 当前页地址) 发送请求的地址。 |
| type | String | (默认: “GET”) 请求方式 (“POST” 或 “GET”)， 默认为 “GET”。 注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。 |
| timeout | Number | 设置请求超时时间（毫秒）。此设置将覆盖全局设置。 |
| async | Boolean | (默认: true) 默认设置下，所有请求均为异步请求。 如果需要发送同步请求，请将此选项设置为 false。 注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 |
| beforeSend | Function | 发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。 XMLHttpRequest 对象是唯一的参数。 function (XMLHttpRequest) { this; // the options for this ajax request } function (XMLHttpRequest) { this; // the options for this ajax request } |
| cache | Boolean | (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。 |
| complete | Function | 请求完成后回调函数 (请求成功或失败时均调用)。 参数： XMLHttpRequest 对象，成功信息字符串。 function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } function (XMLHttpRequest, textStatus) { this; // the options for this ajax request } |
| contentType | String | (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。 |
| data | Object, String |
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。 如果为数组，jQuery 将自动为不同值对应同一个名称。 如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。 |
| dataType | String | 预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息 返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: “xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含 script 元素。 “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。 “json”: 返回 JSON 数据 。 “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时， 如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 |
| error | Function | (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。
这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。 function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } function (XMLHttpRequest, textStatus, errorThrown) { // 通常情况下textStatus和errorThown只有其中一个有值 this; // the options for this ajax request } |
| global | Boolean | (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，
如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件 |
| ifModified | Boolean | (默认: false) 仅在服务器数据改变时获取新数据。
使用 HTTP 包 Last-Modified 头信息判断。 |
| processData | Boolean | (默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串)
以配合默认内容类型 “application/x-www-form-urlencoded”。 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 |
| success | Function |
请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态 function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } function (data, textStatus) { // data could be xmlDoc, jsonObj, html, text, etc... this; // the options for this ajax request } |
データ型として xml、script、html、json を指定でき、beforeSend、error、success、complete、その他の状態の処理関数を設定して、ユーザーの Ajax エクスペリエンスを完全に定義するために他の多くのパラメーターをカスタマイズすることもできます。 。次の例では、ajax() を使用して XML ドキュメントを呼び出します:
(グローバル イベント) リクエストが開始される前にトリガーされるグローバル イベント
success
(ローカル イベント) リクエストが成功したときにトリガーされます。つまり、サーバーはエラーを返さず、返されたデータにはエラーがありません。
ajaxSuccess
グローバル イベント グローバル リクエストの成功
error
(ローカル イベント) は、エラーが発生した場合にのみトリガーされます。成功コールバック関数とエラー コールバック関数を同時に実行することはできません
ajaxError
グローバル イベント エラーが発生するとグローバル イベントがトリガーされます
complete
(ローカル イベント) リクエストが成功したか失敗したかに関係なく、同期リクエストの場合、このイベントはリクエストの完了時にトリガーされます。
ajaxComplete
グローバル イベント リクエストの完了時にグローバル イベントがトリガーされます。
ajaxStop
(グローバル イベント) no の場合Ajax が進行中、
ローカル イベントがトリガーされます。 これは前の関数で紹介しました。主にグローバル イベントを見てみましょう。グローバル イベント監視がオブジェクトに対して実行される場合、世界中のすべての AJAX アクションがそのオブジェクトに影響を与えます。たとえば、ページが AJAX 操作を実行している場合、ID が「loading」の DIV が表示されます。
コードをコピー
val()
val() 関数は、あらゆる種類の入力の値など、フォーム コンポーネントの値を返すことができます。セレクター操作を使用すると、オプション グループ、入力ボックス、ボタン、その他の要素の値を簡単に取得できます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
