以下是一个简单的AJAX前后端交互的例子。前端使用JavaScript和AJAX发送请求，后端使用Python的Flask框架处理请求。
前端（HTML + JavaScript）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/get_data", true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("data").innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="fetchData()">Fetch Data</button>
<div id="data">Data will appear here after fetching.</div>
</body>
</html>后端（Python + Flask）:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/get_data')
def get_data():
# 这里只是示例，通常后端会处理数据库数据等
data = "Hello, this is the data!"
return data, 200
if __name__ == '__main__':
app.run(debug=True)在这个例子中，当用户点击按钮时，JavaScript中的fetchData函数会被调用，它创建一个新的XMLHttpRequest对象，然后发送一个GET请求到/get_data路由。后端的Flask应用处理这个请求，并返回一个简单的字符串数据。当请求完成并且响应状态为200时，AJAX会更新页面上的div元素来显示返回的数据。