python flask框架实现AJAX数据传输

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




from flask import Flask, render_template, request, jsonify
 
app = Flask(__name__)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/get_data', methods=['POST'])
def get_data():
    # 假设这里从request.form或者request.args中获取参数
    param = request.form['param']
    # 处理数据，这里只是打印出参数作为示例
    print(param)
    # 假设处理后得到的数据是response_data
    response_data = {'result': 'processed data'}
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True)

HTML 文件 (index.html):




<!DOCTYPE html>
<html>
<head>
    <title>Flask AJAX Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="param_input" />
        <button id="send_btn">Send</button>
    </div>
    <div id="response_div"></div>
 
    <script>
        $(document).ready(function(){
            $('#send_btn').click(function(){
                var param = $('#param_input').val();
                $.ajax({
                    type: 'POST',
                    url: '/get_data',
                    data: {
                        'param': param
                    },
                    success: function(response) {
                        $('#response_div').text(response.result);
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + status + "\nError: " + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，我们使用了Flask框架和jQuery实现了一个简单的AJAX请求。当用户点击按钮时，输入框中的值会通过AJAX POST请求发送到服务器，服务器处理完数据后，将结果以JSON格式返回给客户端，客户端接收到响应后将数据显示在页面上。

python flask框架实现AJAX数据传输

评论已关闭

推荐阅读