成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

什么是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="http://www.gimoo.net/t/1810/{{ 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, request
app = 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