5新しいjquery.ajax（）例JQuery 1.9-jsチュートリアル-php.cn

5新しいjquery.ajax（）例JQuery 1.9

Joseph Gordon-Levitt

リリース： 2025-02-23 10:08:09

オリジナル

311 人が閲覧しました

5 New jQuery.Ajax() Examples jQuery 1.9

キーポイントの概要

概要

jquery.ajax（）関数の使用は、最近のバージョンで進化しています。および.complete（）メソッド。
この記事では、jquery.ajax（）使用法の5つの例を示しています。例1は、ニュースレターを購読するための基本的なAJAX要求を示し、例2はAJAX要求のエラーとタイムアウトを処理する方法を示しています。
例3は、dataFilter関数を使用してAJAX要求によって返される生データを処理する方法を示し、例4はXMLHTTPREQUESTで利用可能なコンテンツ応答ヘッダータイプを指定する方法について説明します。
最後の例である例5は、スクリプトから返されたXMLデータを解析する方法を説明し、$ .AJAX DataTypeオプションを正しく指定し、サーバーが適切なMIMEタイプでコンテンツを送信することの重要性を強調しています。

2013年の入力

…jquery.ajax（）関数の使用方法は、最近のバージョンで変更されました。これを念頭に置いて、古い例はわずかに古くなっているため、5つの新しいjquery.ajax（）例（jquery 1.9）を書き、jquery 1.9.xと2.0の新しいバージョンでAjaxを使用する方法を示しました。新しい方法には、古い方法よりもいくつかの利点があります。

参照のためにAjaxコードスニペットでこの投稿を更新しておくようにします。いつものように、コメントは大歓迎です。

学習者向けのいくつかのクイックリマインダー：-.done（）メソッドは、非推奨JQXHR.SUCCESS（）メソッドを置き換えます。 -.fail（）メソッドは、deprecated .error（）メソッドを置き換えます。 -.always（）メソッドは、deprecated .complete（）メソッドを置き換えます。

jQuery 1.9 ajaxの例1 - ニュースレターに登録

この例は、スクリプトに名前と電子メールを送信するためのニュースレターを購読する基本的なAJAX要求を示しています。

var subscribeRequest = $.ajax({
     type: "POST",
     url: "subscribe.php",
     data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});

subscribeRequest.done(function(msg) {
     alert( "您已成功订阅我们的邮件列表。" );
});

subscribeRequest.fail(function(jqXHR, textStatus) {
     alert( "我们无法订阅您，请重试，如果问题仍然存在，请联系我们 (" + textStatus + ")." );
});

ログイン後にコピー

jQuery 1.9 ajaxの例この例は、Ajaxリクエストのタイムアウトなど、エラーや障害をキャッチする方法を示しています。＆gt;タイムアウトは、$ .AJAXコールが発行されたときに開始されます。 Firefox 3.0のみで、スクリプトとJSONPリクエストは、タイムアウト後に到着しても実行できません。

jQuery 1.9 ajaxの例3 - datafilter

var newDataRequest = $.ajax({
     url: "getNewData.php",
     timeout: 30000, // 30 秒后超时
     data: { timestamp: new Date().getTime() }
});

newDataRequest.done(function(data) {
     console.log(data);
});

newDataRequest.fail(function(jqXHR, textStatus) {
    if (jqXHR.status === 0) {
        alert('未连接。请验证网络。');
    } else if (jqXHR.status == 404) {
        alert('请求的页面未找到。[404]');
    } else if (jqXHR.status == 500) {
        alert('内部服务器错误 [500]。');
    } else if (exception === 'parsererror') {
        alert('请求的 JSON 解析失败。');
    } else if (exception === 'timeout') {
        alert('超时错误。');
    } else if (exception === 'abort') {
        alert('Ajax 请求已中止。');
    } else {
        alert('未捕获的错误。\n' + jqXHR.responseText);
    }
});

ログイン後にコピー

この例は、dataFilter関数を使用してAJAX要求によって返される生データを処理する方法を示しています。

jQuery 1.9 ajaxの例

この例は、xmlhttprequestで利用可能なコンテンツ応答ヘッダータイプを指定する方法を示しています。コンテンツタイプを$ .ajax（）に明示的に渡すと、常にサーバーに送信されます（データが送信されていなくても）。文字セットが指定されていない場合、データはサーバーのデフォルトの文字セットを使用してサーバーに転送されます。

var subscribeRequest = $.ajax({
     type: "POST",
     url: "subscribe.php",
     data: { subscriberName: $('#name').val(), emailAddress: $('#email').val() }
});

subscribeRequest.done(function(msg) {
     alert( "您已成功订阅我们的邮件列表。" );
});

subscribeRequest.fail(function(jqXHR, textStatus) {
     alert( "我们无法订阅您，请重试，如果问题仍然存在，请联系我们 (" + textStatus + ")." );
});

ログイン後にコピー

jQuery 1.9 ajax例5 - xml

の解析

この例は、jQueryドキュメント「AJAXリクエストのデータ型を指定」から取得しています。スクリプトから返されたXMLの読み込みと解析がXMLに返されることを示しています（インターネットエクスプローラーがテキスト/XMLの代わりにプレーンテキストとして受信された場合）。 $ .AJAX DatAtypeオプションを「XML」として指定することにより、サーバーがMIMEタイプ「テキスト/XML」でコンテンツを送信することを確認します。間違ったMIMEタイプを送信すると、JQueryが応答で返されるデータを適切に管理できなくなり、スクリプトに予期しない問題が発生する可能性があります。

var newDataRequest = $.ajax({
     url: "getNewData.php",
     timeout: 30000, // 30 秒后超时
     data: { timestamp: new Date().getTime() }
});

newDataRequest.done(function(data) {
     console.log(data);
});

newDataRequest.fail(function(jqXHR, textStatus) {
    if (jqXHR.status === 0) {
        alert('未连接。请验证网络。');
    } else if (jqXHR.status == 404) {
        alert('请求的页面未找到。[404]');
    } else if (jqXHR.status == 500) {
        alert('内部服务器错误 [500]。');
    } else if (exception === 'parsererror') {
        alert('请求的 JSON 解析失败。');
    } else if (exception === 'timeout') {
        alert('超时错误。');
    } else if (exception === 'abort') {
        alert('Ajax 请求已中止。');
    } else {
        alert('未捕获的错误。\n' + jqXHR.responseText);
    }
});

ログイン後にコピー

（jquery ajaxに関するFAQセクションはここに追加され続ける必要があります。コンテンツは入力テキストと一致しています）入力テキストのFAQセクションが長すぎるため、出力に完全にコピーしなかったことに注意してください。必要に応じて、入力テキストのFAQ部分を出力の最後に直接追加できます。

以上が5新しいjquery.ajax（）例JQuery 1.9の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。