如何在 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",
        },
       ]);

希望对你有帮助 =)