javascript - 来自服务器 json 对象的数据表

标签 javascript jquery ajax datatables

我将表单数据作为 ajax post 请求提交给后端 Flask 应用程序。后端进程使用数据查询数据库,然后将 json 对象返回给 Ajax。如何从这个 json 对象构造数据表?

我的 Ajax 发布请求:

$(document).ready(function() {
    $("#submit").click(function(event) {
        $.ajax({
            type: 'POST',
            url: '/process',
            data: $('#myform').serialize(),
            success: function(response) {
                //response looks like this: 
                //[{"country": "USA", "code": "1007-01" },{"country": "UK", "code": "1100-04" }]

            }
        });
        event.preventDefault();
    });
});

我的 flask 应用

@app.route('/process', methods=["POST"])
def process():
    if request.method == 'POST':
       country = request.form['id'].encode("utf-8")
       #query database and store result in dict
       result = query_database(country)
       return jsonify(result)

最佳答案

使用 ajax 调用作为数据源初始化数据表

let datatable = $('#my-table').DataTable({
    ajax: {
        url: '/process',
        method: 'POST',
        data: {
            $('#myform').serialize()
        } 
    }
});

现在你只需要像这样格式化你的回复

{ 
    data:[/*your Data*/]
}

关于javascript - 来自服务器 json 对象的数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50430840/

相关文章:

javascript - 三个 JS 将模型旋转到 xyz 位置

javascript - 将 session 变量从 PHP 传递到 JS

jquery - 使用 jQuery 处理 json 数据并将其转换为选项选择器

android - Jplayer 播放列表将无法在 Android 或 iOS 中运行

ajax - 使用 EL 表达式将组件 ID 传递给 JSF 中的复合组件

javascript - 正确使用 JSON 进行简单的餐厅菜单描述

javascript - Jquery 和 Ajax - 在 ajax 请求后无法触发表单提交

javascript - 正则表达式语法困难

javascript - 如果ajax成功则关闭对话框

javascript - jQuery ajax 表单提交到 php 无法处理服务器的响应