ajax前后端交互示例

作者：System 时间：2024年08月13日分类：所有,ajax 字数：1282

这篇文章距离上次修改已过443天，其中的内容可能已经有所变动。

以下是一个简单的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函数会被调用，发送一个AJAX GET请求到/get_data。后端的Flask应用处理这个请求，并返回一个简单的字符串数据。这个数据随后被插入到HTML页面中的指定元素内。

ajax前后端交互示例

评论已关闭

推荐阅读