如何在JSFiddle中模拟Ajax请求

Question

我有一个JSFiddle：https://jsfiddle.net/9z362cLj/6/。我试图模仿这样的Ajax请求：

var json_data = {"recordsTotal":23286,"recordsFiltered":23286,
"data":[{"id":104,"activity_type":"Option 1",}],
"draw":1,
"options":{"activity_type":[{"label":"Option 1","value":1},
                            {"label":"Option 2","value":2},]}}

console.log(json_data.data)

var oTable = $('#example').DataTable({
    serverSide: true,
    ajax: {url: "/echo/json/",
                type: "POST",
          data: json_data
        },
});

yadcf.init(oTable,
      [
        {
          column_number : 0,
          filter_type: "range_date",
        },
        {
          column_number : 1,
          filter_type: "select",
          select_type: "select2",
        },
       ]);

json_data采用Ajax请求在实际项目中收到的实际响应的格式。但是，DataTable中没有显示任何内容。如何将数据显示在DataTable中？

Answer 1

嗨，你可以尝试像我创建的jsfiddle

或者将您的json响应添加为如下字符串：

数据：{

json:'{"status":"success","message":"Hello World"}'

},

编辑：

在你的json和你的ajax中的列定义中，我在你的小提琴中纠正了一些像“，”的东西：

    var json_data = {
"data":[{"id":104,"activity_type":"Option 1"}, {"id":102,"activity_type":"option 2"}],
"recordsTotal":23286,"recordsFiltered":23286,
"draw":1,
"options":{"activity_type":[{"label":"Option 1","value":1},
                            {"label":"Option 2","value":2}]}};       
console.log(json_data)
var oTable = $('#example').DataTable({
    serverSide: true,
    ajax: {url: "/echo/json/",
                type: "POST",
          data:{ json : JSON.stringify(json_data) }
          },
           "columns": [
            { "data": "id" },
            { "data": "activity_type" }
        ]
});

yadcf.init(oTable,
      [
        {
          column_number : 0,
          filter_type: "range_date",
        },
        {
          column_number : 1,
          filter_type: "select",
          select_type: "select2",
        },
       ]);

希望它有帮助=）