获取JavaScript JSON字符串来填充DataTable

Getting JavaScript JSON string to populate DataTable

本文关键字：填充 DataTable 字符串 JavaScript JSON 获取      更新时间：2023-09-26

我有一个java函数，它从java中的Servlet获取JSON数据字符串。我试图使用该数据填充一个数据表(http://www.datatables.net/examples/data_sources/ajax.html)

这是数据表网站指导用户填充数据表的方式:

$(document).ready(function() {
    $('#example').dataTable( {
        "ajax": '../ajax/data/arrays.txt'
    } );
} );

这个javascript方法调用servlet中的doPost方法生成并返回JSON: 

<script>
  $(document).ready(function() { // When the HTML DOM is ready loading, then execute the following function...
    //$('#somebutton').click(function() { // Locate HTML DOM element with ID "somebutton" and assign the following function to its "click" event...
    var bodyContent = $.ajax({
      url : "DAOserv",
      global : false,
      type : "POST",
      data : "name=value",
      dataType : "json",
      async : false,
      success : function() {
                  console.log("ok");
                  alert("ok");  
                }
    }).responseText;
    console.log(bodyContent);
  });
</script>

我怎么能得到JSON字符串在var bodyContent填充数据表?

首先，您并没有真正使用AJAX;当你这样做的时候:

var bodyContent = $.ajax({
    url : "DAOserv",
    global : false,
    type : "POST",
    data : "name=value",
    dataType : "json",
    async : false,
    success : function() {
            console.log("ok");
            alert("ok");    
}).responseText;

你设置async: false…但是AJAX代表异步 Javascript和XML。使用AJAX方法会发生以下情况:

    $.ajax 启动请求
  1. 服务器需要多少时间来响应;在此期间用户的浏览器未被锁定
  2. 当服务器响应你定义的success回调被调用

随着你的到来

  1. 执行$.ajax
  2. 用户的浏览器在等待响应时被锁定
  3. 当服务器响应你的代码时(在$.ajax调用之后)被调用。

要使您的代码成为真正的AJAX，请这样做:

var bodyContent = $.ajax({
    url : "DAOserv",
    global : false,
    type : "POST",
    data : "name=value",
    dataType : "json",
    success : function(responseText) {
            bodyContent = responseText
    }
});
当然，一旦响应返回，您还需要构建您的数据表，所以您真正想要的是: 
    success : function(responseText) {
                $('#example').dataTable( {
                    "data": responseText
                });
    }

(或者类似的东西;我忘了DataTable的确切语法)

参考jQuery。ajax文档。success回调的第一个参数从服务器返回的数据。还要注意，对这些数据的所有操作都应该在这个回调中。我想你应该另外检查status参数:

$(document).ready(function() {
    var bodyContent = null;
    $.ajax({
        url : "DAOserv",
        global : false,
        type : "POST",
        data : "name=value",
        dataType : "json",
        success : function(data, status) {
            console.log(data);
            $('#example').dataTable( {
                "data": $.parseJSON(data),
                "columns": [
                    { "title": "Engine" },
                    { "title": "Browser" },
                    { "title": "Platform" },
                ]
            });   
         });
    });
});

UPDATE要填充数据服务器应该响应JSON编码的数据数组，您应该解析它并传递给dataTable，如这里所示。

相关文章：