在Web開發中，我們經常會遇到需要從服務器端獲取數據并在頁面上展示的情景。傳統的方法是刷新整個頁面或者使用iframe來實現局部刷新。然而，這樣的方式效率較低且用戶體驗較差。而Ajax技術的出現解決了這個問題，使得我們能夠在不刷新頁面的情況下獲取服務器返回的數據，并將其展示在頁面上。
舉個例子來說明Ajax的使用：假設我們正在開發一個天氣查詢網站。用戶輸入城市名后，我們需要將其發送給服務器端進行查詢，并返回該城市的天氣信息。如果使用傳統的方式，用戶每次查詢都需要等待整個頁面刷新，這樣的體驗會讓用戶感到煩躁。而使用Ajax技術，我們可以實現在不刷新頁面的情況下，實時獲取服務器返回的天氣信息，并將其展示在頁面上。這樣的方式不僅提高了用戶體驗，還減少了服務器的壓力。
下面是一個使用Ajax獲取Flask返回字符串的示例代碼：
＜pre＞
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/get_weather', methods=['GET'])
def get_weather():
city = request.args.get('city')
# 調用天氣查詢API獲取天氣信息
weather_info = call_weather_api(city)
if weather_info is not None:
return jsonify({
'result': 'success',
'weather': weather_info
})
else:
return jsonify({'result': 'failure'})
if __name__ == '__main__':
app.run()
＜/pre＞
在上述代碼中，我們使用Flask框架搭建了一個簡單的服務器端應用。當客戶端通過GET請求訪問'/get_weather'接口時，我們獲取到客戶端傳遞的城市名，并調用相應的天氣查詢API獲取天氣信息。然后，我們將獲取到的天氣信息封裝成JSON格式，并返回給客戶端。
客戶端可以使用以下代碼來實現通過Ajax獲取Flask返回字符串：
＜pre＞
function getWeather(city) {
$.ajax({
type: 'GET',
url: '/get_weather',
data: {
'city': city
},
success: function(response) {
if (response.result === 'success') {
var weatherInfo = response.weather;
// 更新頁面上的天氣信息
$('#weather').text(weatherInfo);
} else {
alert('獲取天氣信息失敗');
}
},
error: function() {
alert('請求失敗');
}
});
}
getWeather('北京');
＜/pre＞
在上述代碼中，我們使用了jQuery的ajax方法來發送GET請求。我們需要指定請求的類型（type）、URL（url）以及傳遞的參數（data）。在服務器端返回成功時，我們可以通過response對象獲取到返回的數據。如果成功獲取到天氣信息，我們可以將其更新到頁面上。
通過以上的示例，我們可以清晰地看到使用Ajax獲取Flask返回字符串的整個過程。這種方式不僅可以提高用戶體驗，還減少了服務器壓力，使得Web應用更加高效。在實際開發中，我們可以根據具體的需求來設計和實現功能豐富的Ajax交互。