### 導航
- [索引](# "總目錄")
- [下一頁](# "自定義錯誤頁面") |
- [上一頁](# "消息閃現") |
- [Flask 0.10.1 文檔](#) ?
- [Flask 代碼模式](#) ?
# 用 jQuery 實現 Ajax
[jQuery](http://jquery.com/) [http://jquery.com/] 是一個小型的 JavaScript 庫,它通常被用來簡化 DOM 和 JavaScript操作。通過在服務器和客戶端之間交換 JSON 數據是使得 Web 應用動態化的完美方式。
JSON 本身是一個很清量級的數據傳輸格式,非常近似于 Python 的原始數據類型(數字、字符串、字典和鏈表等),這一數據格式被廣泛支持,而且非常容易解析。它幾年前開始流行,然后迅速取代了 XML 在 Web 應用常用數據傳輸格式中的地位。
如果您使用 Python 2.6 以上版本,JSON 的解析庫是開箱即用的。在 Python 2.5 中您則必須從 PyPI 安裝 [simplejson](http://pypi.python.org/pypi/simplejson) [http://pypi.python.org/pypi/simplejson] 庫。
### 加載 jQuery
為了使用 jQuery 您需要先下載它,然后將其放置在您應用的靜態文件夾中,并確認他被加載了。理想的情況下是,您有一個用于所有頁面的布局模板。要加載 jQuery您只需要在這個布局模板中 <body> 標簽的最下方添加一個 script 標簽。
~~~
<script type=text/javascript src="{{
url_for('static', filename='jquery.js') }}"></script>
~~~
另一個加載 jQuery 的技巧是使用 Google 的 [AJAX Libraries API](http://code.google.com/apis/ajaxlibs/documentation/) [http://code.google.com/apis/ajaxlibs/documentation/] :
~~~
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="{{
url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
~~~
在以上配置的情況下,您需要將 jQuery 放置到靜態文件夾當中作為一個備份。瀏覽器將會首先嘗試直接從 Google 加載 jQuery。如果您的用戶至少一次訪問過使用 Google 提供的的 jQuery 版本的話,瀏覽器就會緩存這個代碼,這樣您的網站就可以從中獲得加載更快的好處了。
### 我的站點在哪?
您知道您的應用在哪里運行么?如果您在開發過程當中,那么答案非常簡單:它運行在本地端口,而且就在這個 URL 的根路徑位置。但是如果您后來決定將您的應喲ing移動到一個不同的未知怎么辦?比如 http://example.com/myapp ?在服務器這邊,這從來不是一個問題,原因是我們使用的 [url_for()](# "flask.url_for")函數可以幫我們回答這個問題。但是如果我們在使用 jQuery 我們不應該將指向應用的路徑硬編碼到程序中,而是將它動態化。該如何做到這點呢?
一個簡單的技巧可能是為我們的頁面添加一個 script 標簽,然后設定一個全局變量作為一個應用根路徑的前綴。如下所示:
~~~
<script type=text/javascript>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
~~~
這里的 |safe 是必要的。這樣 Jinja 才不會將 JSON 編碼的字符串以 HTML 的規則過濾處理掉。通常這種過濾是必要的,但是在 script 標簽塊當中有著不同于原先的過濾規則。
可能有用的信息
在 HTML 中, script 標簽被聲明為 CDATA 。這意味著 HTML 轉義實體將不會被解析。在 </script> 出現之前的所有內容都被當做腳本處理。這也意味著在script 標簽的內容之中不應該出現 </ 字樣。|tojson 足以在這里完成正確的事情,他將會為您過濾掉斜杠({{"</script>"|tojson|safe}} 將會被渲染成 "<\/script>")。
### JSON 視圖函數
現在讓我們創建一個服務端函數,這個服務端函數接收兩個數字形式的 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 ,并且包含一個小表單用于提供加法運算的兩個數,同時表單還提供了用于激發服務器端函數的一個鏈接。
注意,這里我們使用不會拋出錯誤的 [get()](http://werkzeug.pocoo.org/docs/datastructures/#werkzeug.datastructures.MultiDict.get "(在 Werkzeug v0.10)") [http://werkzeug.pocoo.org/docs/datastructures/#werkzeug.datastructures.MultiDict.get] 方法。如果對應的鍵不存在,一個默認值(這里是 0)將hi被返回。更進一步,我們還可以將值轉換為一個特定類型(就像我們這里的 int 類型)。這對于由腳本(APIs,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 使用的細節,僅僅對以上代買做一個快速的解釋:
1. $(function(){...}) 將會在瀏覽器加載完頁面的基礎內容之后立即執行。
1. $('selector') 選擇一個用于操作的元素。
1. element.bind('event',func) 指定元素被單擊時運行的函數,如果這個函數返回 false ,那么單擊操作的默認行為將被取消。在本例中,點擊操作的默認行為是導航到 # 鏈接標簽。
1. $.getJSON(url,data,func) 發送一個 GET 請求給 url ,其中 data對象的內容將以查詢參數的形式發送。一旦數據抵達,它將以返回值作為參數執行給定的函數。請注意,我們在這里可以使用我們先前設定的 $SCRIPT_ROOT 變量。
如果您還沒有完全了解這個例子,可以從 github 上下載 [本例源碼](http://github.com/mitsuhiko/flask/tree/master/examples/jqueryexample) [http://github.com/mitsuhiko/flask/tree/master/examples/jqueryexample] 。
? 版權所有 2013, Armin Ronacher.
- 歡迎使用 Flask
- 前言
- 給有經驗程序員的前言
- 安裝
- 快速入門
- 教程
- 介紹 Flaskr
- 步驟 0: 創建文件夾
- 步驟 1: 數據庫模式
- 步驟 2: 應用設置代碼
- 步驟 3: 創建數據庫
- 步驟 4: 請求數據庫連接
- 步驟 5: 視圖函數
- 步驟 6: 模板
- 步驟 7: 添加樣式
- 福利: 應用測試
- 模板
- 測試 Flask 應用
- 記錄應用錯誤
- 配置處理
- 信號
- 即插視圖
- 應用上下文
- 請求上下文
- 用藍圖實現模塊化的應用
- Flask 擴展
- 與 Shell 共舞
- Flask 代碼模式
- 大型應用
- 應用程序的工廠函數
- 應用調度
- 使用 URL 處理器
- 部署和分發
- 使用 Fabric 部署
- 在 Flask 中使用 SQLite 3
- 在 Flask 中使用 SQLAlchemy
- 上傳文件
- 緩存
- 視圖裝飾器
- 使用 WTForms 進行表單驗證
- 模板繼承
- 消息閃現
- 用 jQuery 實現 Ajax
- 自定義錯誤頁面
- 延遲加載視圖
- 在 Flask 中使用 MongoKit
- 添加 Favicon
- 數據流
- 延遲請求回調
- 添加 HTTP Method Overrides
- 請求內容校驗碼
- 基于 Celery 的后臺任務
- 部署選擇
- mod_wsgi (Apache)
- 獨立 WSGI 容器
- uWSGI
- FastCGI
- CGI
- 聚沙成塔
- API
- JSON 支持
- Flask 中的設計決策
- HTML/XHTML 常見問題
- 安全注意事項
- Flask 中的 Unicode
- Flask 擴展開發
- Pocoo 風格指引
- Python 3 支持
- 升級到最新版本
- Flask Changelog
- 許可證
- 術語表