状況によっては、リフレッシュ要求といくつかのリソースを必要としますが、ページ全体の更新をしたくない、アヤックスに対処する必要性について、この時間は、それは、リフレッシュ要求とコンテンツをトリガするためにページの一部であります
二つのビューとHTMLを準備します
フラスコインポートフラスコ、render_template、リクエストから
アプリ=フラスコ（__ name__、static_url_path = ''）
@ app.route（ '/'）
DEFインデックス（）：
リターン"こんにちは、世界！
@ app.route（ '/コンテンツ/'）
DEF TEXT_CONTENT（）：
リターンrender_template（ 'content.html'）
@ app.route（ '/ XHR /'）
DEF text_xhr（）：
リターンrender_template（ 'xhr.html'）
もし__name__ == '__main__'：
app.run（デバッグ=真）
<H1>
これは、content.html
<の/ H1>
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> AJAX </ TITLE>
</ HEAD>
<BODY>
<H1>这是xhr.html < / H1>
<DIV ID = "MSG"> </ div>
<ボタンID = "btnGet">获取内容</ボタン>
</ body>
</ HTML>
実装された場合、コンテンツの内容を取得し、divの内側に表示するためにレンダリングされたAJAXを使用してコンテンツをクリックしてください
使用JS書き込み要求、データ収集、データレンダリング動作
<SCRIPT>
のgetData（）{機能
するvar XHRを;
//は、オブジェクトブラウザをインスタンス
（window.ActiveXObject）{IF
XHR ActiveXObjectの新しい新=（ 'Microsoft.XMLHTTP'）;
}そうIF（window.XMLHttpRequest）{
XHR =新しい新XMLHttpRequestを（）;
} {他に
スロー新しい新しいエラー（ '現在のブラウザは、アヤックスをサポートしていません'）;
}
//状態変更のXHR関連した指定されたイベント
xhr.onreadystatechange =機能（）{
（xhr.readyState 4 && == XHR IF。 == 200）{.statusで
のinnerHTML = xhr.responseText ;.のdocument.getElementById（ 'MSG'）
}
};
//アドレス初期化要求マナー
xhr.open（ 'GET'、 '/コンテンツ/'）;
xhr.send（）; //リクエストを送信する
}
</ SCRIPT>
機能を掛け、電卓の例を見てください
フラスコインポートフラスコ、render_template、リクエストから
アプリ=フラスコ（__ name__、static_url_path = ''）
@ app.route（ '/ CALC /'）
：DEF CALC（）
NUM1 '0、A = INT（request.args.get（' ））
B = INT（request.args.get（ 'NUM2'、0））
結果= * Bが
リターンrender_template（ 'calc.html'、結果=結果）
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>计算</ TITLE>
</ HEAD>
<BODY>
<フォームアクション= "＃">
<入力タイプ= "テキスト" ID = "NUM1"名前= "NUM1">
*
の<input type = "text" ID = "num2の"名前= "NUM2">
=
の<input type = "text" ID = "結果"の名前= "結果"値= "{他結果場合{もたらす''}}">
<P>
の<input type =値を"送信" = "点击计算">
</ P>
</ FORM>
</ BODY>
</ HTML>
要求の提出トリガ、ページ全体が結果だけに戻るには、リフレッシュされ、以前の値が存在しないので、それはこのような状況が発生します、地元をリフレッシュする必要があります
Ajaxの実現
htmlのjsのスクリプトを変更し、追加します
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>计算</ TITLE>
</ HEAD>
<BODY>
の<input type = "text" ID = "NUM1" NAME = "NUM1"> *の<input type = "テキスト" ID = "NUM2" NAME = "NUM2">
= <入力タイプ= "テキスト" ID = "結果" NAME = "結果">
<P> <ボタンID = "btnCalc"のonclick = "do_calc（）">点击进行AJAX计算</ボタン> </ P>
</ BODY>
</ HTML>
<スクリプト>
関数do_calc（）{
VARのXHR =新規のXMLHttpRequest（） ;
。VARのA =のdocument.getElementById（ 'NUM1'）値。
VaRのB =のdocument.getElementById（ 'NUM2'）値。
xhr.onreadystatechange =関数（）{
IF（xhr.readyState == 4 && xhr.statusの== 200）{
document.getElementById（ '結果'）値= xhr.responseText。
}
}。
xhr.open（ 'GET'、 '/ ajax_calc / A =' + A + '＆B =' + B）。
xhr.send（）;
}
</ SCRIPT>
計算されたビューを増やします
フラスコインポートフラスコ、render_template、リクエストから
アプリ=フラスコ（__ name__、static_url_path = ''）
@ app.route（ '/ ajax_calc /'）
：DEF ajax_calc（）
A '0、A = INT（request.args.get（' ））
、B = INT（request.args.get（ 'B'、0））
結果= * bは
戻りSTR（結果）
@ app.route（ '/ CALC /'）
DEF CALC（）：
A = INT（リクエスト.args.get（ 'NUM1'、0））
、B = INT（request.args.get（ 'NUM2'、0））
結果= * Bが
リターンrender_template（ 'calc.html'、結果=結果）
これは部分的にしかリフレッシュ、すべてのデータを保持します