문서 준비 전에 html 페이지 표시

Question

문서에 Ajax 호출이있어서 테이블을 채울 준비가되었습니다. 불행히도 페이지는 테이블이 채워진 후에 만 ​​표시됩니다. 내가 준비 기능에 경고 문을 넣으면

$(document).ready(function() { 
    // alert('Why'); 
    var jsondata2a; 
    turl = "/rims/tab1/get_data?abc=123"; 
    $.ajax({ 
    url: turl+"", 
    cache: false, 
    async: false, 
    success: function(data){ 
      jsondata2a = data; 
    }, 
    error: function(){ 
      $("#gerror").html("<p>An error has occurred!</p>"); 
     } 
    }); 

그러나 페이지가 표시 즉시 경고와 다음 경고를 받아들이 후 테이블을 채 웁니다.

경고문에 전체 페이지가 표시되지만 경고가 없으면 모든 ajax 호출이 완료 될 때까지 페이지가 표시되지 않습니다. 준비 기능을 페이지의 다른 부분으로 옮기려고 시도했지만 성공하지 못했습니다. IE와 Chrome을 사용해 보았습니다.

도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

이렇게하면됩니다. 나는 그 테이블을 그리는 방법을 알고있는 다른 sctrt를 가지고 있다고 확신합니다. 성공 콜백에 해당 코드를 추가하십시오.

$(document).ready(function() { 
    // alert('Why'); 
    var jsondata2a; 
    turl = "/rims/tab1/get_data?abc=123"; 
    $.ajax({ 
    url: turl+"", 
    cache: false, 
    // async: false, 
    success: function(data){ 
      jsondata2a = data; 
      for(var i=0; i< data.length; i++){ 
       $("#table_id").append("<tr>" ...boud data here data[i].someAttribute... "</tr>"); 
      } 
    }, 
    error: function(){ 
      $("#gerror").html("<p>An error has occurred!</p>"); 
     } 
    }); 

Answer 2

ajax 요청을 수행하려면 $(document).ready()을 기다릴 필요가 없습니다. dom과 상호 작용하기 전에 기다려야합니다. 따라서 준비 함수 밖에서 요청을 수행하고 성공 콜백 내에서 준비가 된 DOM을 수신하십시오.

이렇게해도 페이지가 렌더링되지 않습니다. 당신이 당신의 jQuery ajax 통화를 차단 방지하려면

$.ajax({ 
    ... 
    success: function() { 
    $(document).ready(function() { 
     /* manipulate DOM here */ 
    }); 
    } 
}); 

Answer 3

, 당신은 진정한 (기본값)로 비동기 설정이 있어야합니다.

 $.ajax({ 
      type: 'POST', 
      url: 'YourURLHere.html', 
      data: '{}', 
      contentType: 'application/json; charset=utf-8', 
      dataType: 'json', 
      async: true, 
      success: function (data, text) { 
       // Do Something 
      }, 
      error:function (request, status, error){ 
       // Alert Somebody 
      } 
     });