AJAX请求成功但Datables没有填充数据

时间:2016-05-22 11:53:40

标签: javascript jquery ajax datatables

我正在成功进行AJAX调用,但数据仍未填满数据。

HTML:

<div id="modal"class="modal-body">
  <button type="button" onclick="javascript:vulnDetails()" class="btn btn-info btn-lg" id="modalButton">Show Vulnerabilities</button><div id="myData">
    <table id="example" class="display" style="display:none"cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ip</th>
            <th>description</th>
            <th>vulnerability</th>
        </tr>
    </thead>
   </table>          
  </div>
</div>

使用Javascript:

function vulnDetails(){
    $('#example').show();
   $('#example').DataTable( {
        "ajax": {
                 type: "POST",
                 url: '/vulnDetails',
                 data: function ( d ) {
                    return JSON.stringify(data2)},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 dataSrc: ""
        },
        "columns": [
            { "data": "ip" },
            { "data": "desciption" },
            { "data": "vulnerability" },
        ]
    } );
}

请求返回200代码并创建表,但它只是说没有可用的数据。

有人有什么想法吗?

JSON:

 [{'ip': '1.1.1.1', 'vulnerability': 118860, 'description': 'The credentials supplied for the snmp scanning feature encountered an error.'}, {'ip': '1.1.1.1', 'vulnerability': 127166, 'description': 'Samba winbind_name_list_to_sid_string_list security bypass'}, {'ip': u'1.1.1.1', 'vulnerability': 132630, 'description': 'Samba SAMR information disclosure'}, {'ip': '1.1.1.1', 'vulnerability': 132630, 'description': 'Samba SAMR information disclosure'}]

4 个答案:

答案 0 :(得分:0)

尝试删除空函数dataSrc

答案 1 :(得分:0)

删除了dataType:“json”,

function vulnDetails(){
    $('#example').show();
   $('#example').DataTable( {
        "ajax": {
                 type: "POST",
                 url: '/vulnDetails',
                 contentType: "application/json; charset=utf-8",
                 dataSrc: ''
        },
        "columns": [
            { "data": "ip" },
            { "data": "desciption" },
            { "data": "vulnerability" },
        ]
    } );
}

答案 2 :(得分:0)

数据结构应该类似于

  {
  "data": [{'ip': '1.1.1.1', 'vulnerability': 118860, 'description': 'The credentials     supplied for the snmp scanning feature encountered an error.'}, {'ip': '1.1.1.1', 'vulnerability': 127166, 'description': 'Samba winbind_name_list_to_sid_string_list security bypass'}, {'ip': u'1.1.1.1', 'vulnerability': 132630, 'description': 'Samba SAMR information disclosure'}, {'ip': '1.1.1.1', 'vulnerability': 132630, 'description': 'Samba SAMR information disclosure'}]
  }

如果您根据this选择此路线。你应该包括你的后端功能。你的数据应该是一个数组内的值,数据作为关键,例如php

    $data_to_return=array('data'=>$your_data);
    echo $data_to_return;

干杯

这是您的代码应该做的工作。校正

1)JSon数组无效这是一个典型的有效JSon对象

            [
               {
                "ip": "1.1.1.1", 
                "vulnerability": "118860", 
                "description": "The credentials supplied for the snmp  scanning feature encountered an error."
                }, 
               {
               "ip": "1.1.1.1", 
               "vulnerability": "127166", 
               "description": "Samba winbind_name_list_to_sid_string_list security bypass"
               },
              {
             "ip": "1.1.1.1", 
             "vulnerability": "132630", 
             "description": "Samba SAMR information disclosure"
              }, 
             {
              "ip": "1.1.1.1",
               "vulnerability": "132630",
               "description": "Samba SAMR information disclosure"
              }
            ]

对不起我之前忽略了这个

2)纠正

中描述的拼写
         { "data": "desciption" },

更改为

         { "data": "description" },

然后离开你。干杯

答案 3 :(得分:0)

试试这个:

function vulnDetails(){
    $('#example').show();
   $('#example').DataTable( {
        "ajax": {
                 type: "POST",
                 url: '/vulnDetails',
                 "dataSrc": function(data){ return data.data; },
                 "data": function(data){
                // Send data as json for POST.
                return JSON.stringify(data); 
                }
                 contentType: "application/json; charset=utf-8",
                 "processData": true,
                 "async": true,
                  "accepts": {
                      json: "application/json, text/javascript"
                   }
                        },
        "columns": [
            { "data": "ip" },
            { "data": "desciption" },
            { "data": "vulnerability" },
        ]
    } );
}