jQueryを使用したAJAX

jQuery は、一般的にDOMとJavaScriptの操作を簡素化するために一般的に使用される小さなJavaScriptライブラリです。これは、サーバーとクライアント間でJSONを交換することにより、Webアプリケーションをより動的にするのに最適なツールです。

JSON自体は非常に軽量なトランスポート形式であり、Pythonプリミティブ（数値、文字列、dict、リスト）がどのように見えるかと非常によく似ており、広くサポートされており、非常に簡単に解析できます。数年前に普及し、Webアプリケーションのトランスポート形式としてXMLにすぐに取って代わりました。

jQueryを読み込んでいます

jQueryを使用するには、まずjQueryをダウンロードしてアプリケーションの静的フォルダーに配置し、ロードされていることを確認する必要があります。理想的には、jQueryをロードするために<body>の下部にスクリプトステートメントを追加するだけでよいすべてのページに使用されるレイアウトテンプレートがあります。

<script type=text/javascript src="{{
  url_for('static', filename='jquery.js') }}"></script>

別の方法は、Googleの AJAX Libraries API を使用してjQueryをロードすることです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{
  url_for('static', filename='jquery.js') }}">\x3C/script>')</script>

この場合、フォールバックとしてjQueryを静的フォルダーに配置する必要がありますが、最初にGoogleから直接ロードしようとします。これには、ユーザーがGoogleの同じjQueryバージョンを使用する前に少なくとも1つの他のウェブサイトにアクセスした場合、既にブラウザキャッシュにあるため、ウェブサイトの読み込みが速くなるという利点があります。

私のサイトはどこにありますか？

アプリケーションがどこにあるか知っていますか？あなたが開発しているなら、答えは非常に簡単です：それはローカルホストポートに何かあり、そのサーバーのルートに直接あります。しかし、後でアプリケーションを別の場所に移動することにした場合はどうなりますか？たとえば、http://example.com/myappに？サーバー側では、その質問に答えることができる便利なurl_for()関数を使用していたため、これは問題にはなりませんでしたが、jQueryを使用している場合は、アプリケーションへのパスをハードコーディングするのではなく、動的にする必要があります。では、どうすればそれができるでしょうか？

簡単な方法は、アプリケーションのルートのプレフィックスにグローバル変数を設定するスクリプトタグをページに追加することです。このようなもの：

<script type=text/javascript>
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>

|safeは、JinjaがHTMLルールでJSONエンコードされた文字列をエスケープしないように、0.10より前のFlaskで必要です。通常、これは必要ですが、ここではscriptブロック内にあり、さまざまなルールが適用されます。

プロのための情報

HTMLでは、scriptタグはCDATAと宣言されています。これは、エンティティが解析されないことを意味します。 </script>までのすべてがスクリプトとして処理されます。これは、スクリプトタグの間に</があってはならないことも意味します。 |tojsonは、ここで正しいことを行い、スラッシュをエスケープするのに十分親切です（{{ "</script>"|tojson|safe }}は"<\/script>"としてレンダリングされます）。

Flask 0.10では、さらに一歩進んで、すべてのHTMLタグをUnicodeエスケープでエスケープします。これにより、Flaskは結果をHTMLセーフとして自動的にマークすることができます。

JSONビュー関数

次に、数値の2つのURL引数を受け入れるサーバー側関数を作成します。これらの引数は、一緒に追加して、JSONオブジェクトでアプリケーションに送り返す必要があります。これは本当にばかげた例であり、通常はクライアント側だけで行うことですが、それでもjQueryとFlaskをどのように使用するかを示す簡単な例です。

from flask import Flask, jsonify, render_template, request
app = Flask(__name__)

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

@app.route('/')
def index():
    return render_template('index.html')

ご覧のとおり、ここにテンプレートをレンダリングする index メソッドも追加しました。このテンプレートは上記のようにjQueryをロードし、サーバー側で関数をトリガーするために2つの数値とリンクを追加できる小さなフォームを持っています。

ここではget()メソッドを使用していることに注意してください。これは失敗することはありません。キーが欠落している場合、デフォルト値（ここでは0）が返されます。さらに、値を特定の型に変換できます（この場合は int のように）。この場合、特別なエラー報告は必要ないため、これはスクリプト（API、JavaScriptなど）によってトリガーされるコードに特に便利です。

HTML

index.htmlテンプレートは、jQueryがロードされ $ SCRIPT_ROOT 変数が設定された状態で、layout.htmlテンプレートを拡張するか、上部でそれを行う必要があります。これが私たちの小さなアプリケーション（index.html）に必要なHTMLコードです。ここでも、スクリプトをHTMLに直接ドロップしていることに注意してください。通常は、別のスクリプトファイルに含めることをお勧めします。

<script type=text/javascript>
  $(function() {
    $('a#calculate').bind('click', function() {
      $.getJSON($SCRIPT_ROOT + '/_add_numbers', {
        a: $('input[name="a"]').val(),
        b: $('input[name="b"]').val()
      }, function(data) {
        $("#result").text(data.result);
      });
      return false;
    });
  });
</script>
<h1>jQuery Example</h1>
<p><input type=text size=5 name=a> +
   <input type=text size=5 name=b> =
   <span id=result>?</span>
<p><a href=# id=calculate>calculate server side</a>

ここでは、jQueryがどのように機能するかについては詳しく説明しません。上記のコードについて、簡単に説明します。

$(function() { ... })は、ブラウザがページの基本部分の読み込みを完了したときに実行する必要があるコードを指定します。
$('selector')は要素を選択し、操作できるようにします。
element.bind('event', func)は、ユーザーが要素をクリックしたときに実行される関数を指定します。その関数が false を返す場合、デフォルトの動作は開始されません（この場合、＃ URLに移動します）。
$.getJSON(url, data, func)はGETリクエストを url に送信し、 data オブジェクトのコンテンツをクエリパラメータとして送信します。データが到着すると、戻り値を引数として指定された関数を呼び出します。ここでは、前に設定した $ SCRIPT_ROOT 変数を使用できることに注意してください。

をチェックしてください：gh： `サンプルソース ` このページのコードを示す完全なアプリケーション、および同じことを使用する場合XMLHttpRequestとfetch 。

jQueryを使用したAJAX—フラスコのドキュメント

目次

jQueryを使用したAJAX

jQueryを読み込んでいます

私のサイトはどこにありますか？

JSONビュー関数

HTML