什么是AJAX？

這里的AJAX不是希臘神話里的英雄，也不是清潔劑品牌，更不是一門(mén)語(yǔ)言，而是指異步Javascript和XML（Asynchronous JavaScript And XML），這里的XML（數(shù)據(jù)格式）也可以是純文本（Plain Text）或是JSON。簡(jiǎn)單的說(shuō)，就是使用XMLHttpRequest對(duì)象和服務(wù)器端交換數(shù)據(jù)（以XML或是JSON等格式），使用JavaScript處理數(shù)據(jù)并更新頁(yè)面內(nèi)容。

為什么要使用AJAX？

借助AJAX，我們可以實(shí)現(xiàn)：

在不重載頁(yè)面的情況下，向服務(wù)器發(fā)送請(qǐng)求；

動(dòng)態(tài)加載數(shù)據(jù)，即在后臺(tái)交換數(shù)據(jù)。

比方說(shuō)，一個(gè)便簽本應(yīng)用，當(dāng)你在表單里填寫(xiě)好內(nèi)容，點(diǎn)擊新建，這時(shí)不會(huì)有頁(yè)面跳轉(zhuǎn)，內(nèi)容即時(shí)更新，數(shù)據(jù)在后臺(tái)寫(xiě)入數(shù)據(jù)庫(kù)。

AJAX讓W(xué)eb APP更像是APP。

使用jQuery實(shí)現(xiàn)AJAX

使用jQuery可以簡(jiǎn)化這個(gè)過(guò)程。下面是一個(gè)簡(jiǎn)單的例子，在兩個(gè)輸入框里輸入數(shù)字，按下計(jì)算按鈕，JavaScript發(fā)送數(shù)據(jù)，在sever端（視圖函數(shù)）獲取數(shù)據(jù)，將兩個(gè)數(shù)相加的結(jié)果返回，JavaScript獲取返回的數(shù)據(jù)并將其顯示在頁(yè)面上。

1、加載jQuery

把jQuery放到static文件夾，然后加載它：

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

或是從CDN加載（你可能需要更換其他站點(diǎn)提供的CDN資源）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2、設(shè)置url變量

在jQuery里沒(méi)法使用url_for函數(shù)獲取地址，所以我們使用request設(shè)置一個(gè)動(dòng)態(tài)的全局變量：

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

兩個(gè)輸入框，一個(gè)按鈕：

<h1>Add Two Number</h1><p><input type="text" size="5" name="a"> +<input type="text" size="5" name="b"> =<span id="result">?</span></p><button id="calculate">Calculate!</button>

3、使用getJSON方法發(fā)送和獲取數(shù)據(jù)

<script type=text/javascript>$(function() {$('a#calculate').bind('click', function() {$.getJSON($SCRIPT_ROOT + '/calculate', {a: $('input[name="a"]').val(),b: $('input[name="b"]').val()}, function(data) {$("#result").text(data.result);});return false;});});</script>

$.getJSON(url, data, func)發(fā)送一個(gè)GET請(qǐng)求，其中url是你要處理數(shù)據(jù)的視圖函數(shù)的url，data是返回的數(shù)據(jù)，func是處理數(shù)據(jù)的函數(shù)。

JSON是JavaScript Object Notation（JavaScript對(duì)象表示法）的縮寫(xiě)，一種數(shù)據(jù)格式，形態(tài)上類(lèi)似Python的字典，以鍵值對(duì)的形式存儲(chǔ)數(shù)據(jù)（符號(hào)也是大括號(hào)）。

4、獲取、處理并返回JSON數(shù)據(jù)的視圖函數(shù)

from flask import Flask, jsonify, render_template, requestapp = Flask(__name__)@app.route('/calculate')def add_numbers():a = request.args.get('a', 0, type=int) # 第二個(gè)參數(shù)作為默認(rèn)值b = request.args.get('b', 0, type=int)return jsonify(result=a + b)@app.route('/')def index():return render_template('index.html')

使用Flask提供的jsonify()函數(shù)返回JSON數(shù)據(jù)。

這個(gè)例子改編自Flask官方的例子，完整的源碼見(jiàn)：https://github.com/pallets/flask/blob/master/examples/jqueryexample