AJAX和jQuery動態載入資料的實現方法_jquery

什麼是AJAX？

這裡的AJAX不是希臘神話裡的英雄，也不是清潔劑品牌，更不是一門語言，而是指非同步Javascript和XML（Asynchronous JavaScript And XML），這裡的XML（資料格式）也可以是純文字（Plain Text）或是JSON。簡單的說，就是使用XMLHttpRequest對象和伺服器端交換資料（以XML或是JSON等格式），使用JavaScript處理資料並更新頁面內容。

為什麼要使用AJAX？

藉助AJAX，我們可以實現：

在不重載頁面的情況下，向伺服器發送請求；

動態載入資料，即在後台交換資料。

比方說，一個便簽本應用，當你在表單裡填寫好內容，點擊建立，這時不會有頁面跳轉，內容即時更新，資料在後台寫入資料庫。

AJAX讓Web APP更像是APP。

使用jQuery實現AJAX

使用jQuery可以簡化這個過程。下面是一個簡單的例子，在兩個輸入框裡輸入數字，按下計算按鈕，JavaScript發送資料，在sever端（視圖函數）擷取資料，將兩個數相加的結果返回，JavaScript擷取返回的資料並將其顯示在頁面上。

1、載入jQuery

把jQuery放到static檔案夾，然後載入它：

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

或是從CDN載入（你可能需要更換其他網站提供的CDN資源）：

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

2、設定url變數

在jQuery裡沒法使用url_for函數擷取地址，所以我們使用request設定一個動態全域變數：

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

兩個輸入框，一個按鈕：

<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方法發送和擷取資料

<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)發送一個GET請求，其中url是你要處理資料的視圖函數的url，data是返回的資料，func是處理資料的函數。

JSON是JavaScript Object Notation（JavaScript對象標記法）的縮寫，一種資料格式，形態上類似Python的字典，以索引值對的形式儲存資料（符號也是大括弧）。

4、擷取、處理並返回JSON資料的視圖函數

from flask import Flask, jsonify, render_template, requestapp = Flask(__name__)@app.route('/calculate')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')

使用Flask提供的jsonify()函數返回JSON資料。

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