什么是AJAX？

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

為什么要使用AJAX？

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

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

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

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

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

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

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

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里沒法使用url_for函數(shù)獲取地址，所以我們使用request設(shè)置一個(gè)動態(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請求，其中url是你要處理數(shù)據(jù)的視圖函數(shù)的url，data是返回的數(shù)據(jù)，func是處理數(shù)據(jù)的函數(shù)。

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

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

from flask import Flask, jsonify, render_template, request
app = 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官方的例子，完整的源碼見：https://github.com/pallets/flask/blob/master/examples/jqueryexample

最新評論