JavaScript 가져 오기 DataTable 채우기 JSON 문자열

Question

Java의 서블릿에서 JSON 문자열 데이터를 가져 오는 Java 함수가 있습니다.

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

그리고 이것은 doPost 메소드를 호출하는 자바 스크립트 방법이다 : 나는 데이터 이것은 DataTables 웹 사이트 datatables을 채우는 사용자를 지시하는 방식은 데이터 테이블 (http://www.datatables.net/examples/data_sources/ajax.html)

입니다 채우는 것을 사용하는 것을 시도하고있다 내 서블릿에서 생성하고 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> 

가 어떻게이 데이터 테이블을 채우는 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 자바 스크립트와 XML의 약자입니다. AJAX를 다음을 접근하는 일이 :

1. 당신은 서버가 응답 그러나 오래 걸립니다 $.ajax
2. 를 수행하여 요청을 시작합니다; 서버가 $.ajax
3. 을 수행하여 사용자가 정의한 success 콜백
   1. 당신은 요청을 시작하는 당신의 접근 방식으로

을 호출되는 응답하면 사용자의 브라우저는이 시간
4. 중에 잠겨 있지 응답을 기다리는 동안 사용자의 브라우저가 잠겨 있습니다.
5. 서버가 코드에 응답하면 ($.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" }, 
       ] 
      }); 
     }); 
    }); 
}); 

UPDATE의 데이터를 JSON 인코딩 된 배열로 응답해야 데이터 서버를 채우려면을 당신은 그것을 분석하고 here을 언급 한 바와 같이 데이터 테이블에 전달한다.