W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
jQuery 是一個(gè)小型的 JavaScript 庫,它通常被用來簡(jiǎn)化 DOM 和 JavaScript 操作。通過在服務(wù)器和客戶端之間交換 JSON 數(shù)據(jù)是使得 Web 應(yīng)用動(dòng)態(tài)化的完美方式。
JSON 本身是一個(gè)很清量級(jí)的數(shù)據(jù)傳輸格式,非常近似于 Python 的原始數(shù)據(jù)類型 (數(shù)字、字符串、字典和鏈表等),這一數(shù)據(jù)格式被廣泛支持,而且非常容易解析。 它幾年前開始流行,然后迅速取代了 XML 在 Web 應(yīng)用常用數(shù)據(jù)傳輸格式中的地位。
如果您使用 Python 2.6 以上版本,JSON 的解析庫是開箱即用的。在 Python 2.5 中 您則必須從 PyPI 安裝 simplejson 庫。
為了使用 jQuery 您需要先下載它,然后將其放置在您應(yīng)用的靜態(tài)文件夾中,并 確認(rèn)他被加載了。理想的情況下是,您有一個(gè)用于所有頁面的布局模板。要加載 jQuery 您只需要在這個(gè)布局模板中 <body> 標(biāo)簽的最下方添加一個(gè) script 標(biāo)簽。
<script type=text/javascript src="{{
url_for('static', filename='jquery.js') }}"></script>
另一個(gè)加載 jQuery 的技巧是使用 Google 的 AJAX Libraries API :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js" rel="external nofollow" ></script>
<script>window.jQuery || document.write('<script src="{{
url_for('static', filename='jquery.js') }}">\x3C/script>')</script>
在以上配置的情況下,您需要將 jQuery 放置到靜態(tài)文件夾當(dāng)中作為一個(gè)備份。瀏覽器將會(huì) 首先嘗試直接從 Google 加載 jQuery。如果您的用戶至少一次訪問過使用 Google 提供的 的 jQuery 版本的話,瀏覽器就會(huì)緩存這個(gè)代碼,這樣您的網(wǎng)站就可以從中獲得加載更快的 好處了。
您知道您的應(yīng)用在哪里運(yùn)行么?如果您在開發(fā)過程當(dāng)中,那么答案非常簡(jiǎn)單: 它運(yùn)行在本地端口,而且就在這個(gè) URL 的根路徑位置。但是如果您后來決定將 您的應(yīng)喲ing移動(dòng)到一個(gè)不同的未知怎么辦?比如 http://example.com/myapp ? 在服務(wù)器這邊,這從來不是一個(gè)問題,原因是我們使用的 url_for() 函數(shù)可以幫我們回答這個(gè)問題。但是如果我們?cè)谑褂?jQuery 我們不應(yīng)該將指向 應(yīng)用的路徑硬編碼到程序中,而是將它動(dòng)態(tài)化。該如何做到這點(diǎn)呢?
一個(gè)簡(jiǎn)單的技巧可能是為我們的頁面添加一個(gè) script 標(biāo)簽,然后設(shè)定一個(gè)全局變量 作為一個(gè)應(yīng)用根路徑的前綴。如下所示:
<script type=text/javascript>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
這里的 |safe 是必要的。這樣 Jinja 才不會(huì)將 JSON 編碼的字符串以 HTML 的規(guī)則 過濾處理掉。通常這種過濾是必要的,但是在 script 標(biāo)簽塊當(dāng)中有著不同于原先的過濾 規(guī)則。
可能有用的信息
在 HTML 中, script 標(biāo)簽被聲明為 CDATA 。這意味著 HTML 轉(zhuǎn)義實(shí)體將不會(huì) 被解析。在 </script> 出現(xiàn)之前的所有內(nèi)容都被當(dāng)做腳本處理。這也意味著在 script 標(biāo)簽的內(nèi)容之中不應(yīng)該出現(xiàn) </ 字樣。|tojson 足以在這里完成 正確的事情,他將會(huì)為您過濾掉斜杠({{ "</script>"|tojson|safe }} 將會(huì)被 渲染成 "<\/script>")。
現(xiàn)在讓我們創(chuàng)建一個(gè)服務(wù)端函數(shù),這個(gè)服務(wù)端函數(shù)接收兩個(gè)數(shù)字形式的 URL 參數(shù), 然后將這兩個(gè)數(shù)字相加并以 JSON 對(duì)象的形式返回給應(yīng)用。這是一個(gè)相當(dāng)可笑的例子, 您通常會(huì)在服務(wù)端直接實(shí)現(xiàn)這個(gè)功能。但是這是一個(gè)方便展示如何配合使用 jQuery 和 Flask 最簡(jiǎn)單的例子了:
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')
正如您所見,我們?cè)谶@里添加了一個(gè) index 函數(shù),這個(gè)函數(shù)用于渲染一個(gè)模板。 這個(gè)模板將會(huì)按照上面的提供的方法加載 jQuery ,并且包含一個(gè)小表單用于提供 加法運(yùn)算的兩個(gè)數(shù),同時(shí)表單還提供了用于激發(fā)服務(wù)器端函數(shù)的一個(gè)鏈接。
注意,這里我們使用不會(huì)拋出錯(cuò)誤的 get() 方法。 如果對(duì)應(yīng)的鍵不存在,一個(gè)默認(rèn)值(這里是 0)將hi被返回。更進(jìn)一步,我們還可以將值轉(zhuǎn)換 為一個(gè)特定類型(就像我們這里的 int 類型)。這對(duì)于由腳本(APIs,JavaScript等)激發(fā)的代碼 來說是個(gè)非常順手的工具,因?yàn)樵谶@種情況下您不需要特別的錯(cuò)誤報(bào)告。
您的 index.html 要么繼承一個(gè)已經(jīng)加載了 jQuery 且設(shè)定了 $SCRIPT_ROOT 環(huán)境變量的 layout.html 模板,要么自己在上方完成了這些事。以下是我們的小應(yīng)用 (index.html) 所需的 HTML 代碼。請(qǐng)注意這里我們也將腳本直接寫入了 HTML。通常來講,將腳本代碼放置 到一個(gè)獨(dú)立的腳本文件里是一個(gè)更好的點(diǎn)子。
<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>
我們不會(huì)過多介紹 jQuery 使用的細(xì)節(jié),僅僅對(duì)以上代買做一個(gè)快速的解釋:
如果您還沒有完全了解這個(gè)例子,可以從 github 上下載 本例源碼 。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: