Flask框架运用Ajax实现数据交互的示例代码

下面是关于“Flask框架运用Ajax实现数据交互的示例代码”的完整攻略，其中包含两个示例说明。

示例一：通过Ajax获取服务器数据

我们假设前端页面上有一个按钮，点击后会向服务器发送一个请求，获取服务器返回的数据，然后将数据展示在页面上。具体实现步骤如下：

1. 在前端页面中，使用jQuery库的$.ajax()函数向服务器发送GET请求，请求数据的URL为服务器端的接口地址，服务端返回的数据格式为JSON。

$.ajax({
    type: "GET",
    url: "/get_data",
    success: function (data) {
        // 将返回的数据展示在页面上
    }
});

1. 在服务器端，使用Flask框架编写一个路由处理函数，接收前端发送的GET请求，并从数据库中获取数据，返回JSON格式的数据。

from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/get_data')
def get_data():
    # 从数据库中获取数据
    data = ...  

    # 将数据转换成JSON格式
    return jsonify(data)

1. 在前端页面中，将返回的JSON数据展示在页面上，例如将数据添加到一个table表格中。

$.ajax({
    type: "GET",
    url: "/get_data",
    success: function (data) {
        // 将返回的数据展示在页面上
        var table = $('<table>');
        for (var i=0; i<data.length; i++) {
            var row = $('<tr>');
            var cell1 = $('<td>').text(data[i].name);
            var cell2 = $('<td>').text(data[i].age);
            var cell3 = $('<td>').text(data[i].gender);
            row.append(cell1, cell2, cell3);
            table.append(row);
        }
        $('#data_container').html(table);
    }
});

示例二：通过Ajax向服务器发送数据

我们假设前端页面上有一个表单，用户在表单中填写一些信息后，点击保存按钮，向服务器提交表单数据。具体实现步骤如下：

1. 在前端页面中，使用jQuery库的$.ajax()函数向服务器发送POST请求，请求数据的URL为服务器端的接口地址，请求数据为表单中的数据，服务端返回的数据格式为JSON。

$('#save_button').on('click', function() {
    var data = $("#form").serialize();
    $.ajax({
        type: "POST",
        url: "/save_data",
        data: data,
        dataType: "json",
        success: function (data) {
            // 处理保存成功后的逻辑
        }
    });
});

1. 在服务器端，使用Flask框架编写一个路由处理函数，接收前端发送的POST请求，并将表单数据保存到数据库中，返回JSON格式的数据。

from flask import Flask, request, jsonify
import json

app = Flask(__name__)

@app.route('/save_data', methods=['POST'])
def save_data():
    # 从请求数据中获取表单数据
    name = request.form.get('name')
    age = request.form.get('age')
    gender = request.form.get('gender')

    # 将表单数据保存到数据库中
    ...

    # 返回JSON格式的数据
    return jsonify({'status': 'success', 'message': '保存成功'})

1. 在前端页面中，处理返回的JSON数据，例如提示用户保存成功或失败的消息。

$('#save_button').on('click', function() {
    var data = $("#form").serialize();
    $.ajax({
        type: "POST",
        url: "/save_data",
        data: data,
        dataType: "json",
        success: function (data) {
            if (data.status === 'success') {
                alert(data.message);
            } else {
                alert('保存失败');
            }
        }
    });
});