获取 JavaScript JSON 字符串以填充 DataTable

Question

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

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

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

这是在我的 servlet 中调用 doPost 方法以生成并返回 JSON 的 javascript 方法：

<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>

如何获取var bodyContent 中的 JSON 字符串来填充数据表？

Answer 1

首先，你并不是真的在做 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 代表 Asynchonous Javascript 和 XML。使用 AJAX 方法会发生以下情况：

1. 你通过$.ajax开始请求
2. 服务器需要很长时间才能响应；用户的浏览器在此期间未锁定
3. 当服务器响应您定义的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 的确切语法。）

Answer 2

请参阅jQuery.ajax docs。在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" },
                ]
            });   
         });
    });
});

更新要填充数据服务器应该响应 JSON 编码的数据数组，你应该解析它并传递给 dataTable，因为它注意到here。