다른 함수에 xmlhttprequested 객체 전달하기

저는 웹 개발에 익숙하지 않고, 아래 코드의 에 Google Chart을 그려 넣습니다.다른 함수에 xmlhttprequested 객체 전달하기

차트를 그리려면 일부 데이터를 전달해야하며 백엔드 (파이썬 사용)의 데이터베이스에서 데이터를 가져 와서 아래의 GetData() 함수에 요청하십시오.

두 작업을 분리하여 수행하는 데 성공했지만 모듈성을 잃지 않고이 작업을 함께 수행하는 방법을 잘 모르겠습니다.

즉, 기능 GetData()에서 ret을 drawChart()에 어떻게 전달할 수 있습니까? 요청이 비동기이기 때문에

function GetData() 
{ 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    if(window.XMLHttpRequest) { 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    var ret; 

    xmlhttp.onreadystatechange=function() 
    { 
     if(xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      ret = JSON.parse(xmlhttp.responseText); 
     } 
    } 

    xmlhttp.open("GET","/submit222", true); 
    xmlhttp.send(); 
    return ret; 
} 

function drawChart() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Number of Requests'); 

    var myData = GetData(); 

    for(var i=0; i<5; i++) { 
     data.addRows([ 
      new Array(new Date(myData[i][0]), Number(myData[i][1])) 
     ]); 
    } 

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); 

    var options = { 
     displayAnnotations: true, 
    }; 

    chart.draw(data, options); 
} 
</script> 
</head>    
    <body onload="GetData()"> 
     <div id='chart_div' style='width: 900px; height: 500px;'></div> 
    </body> 
</html> 
"""

출처

2014-03-29 user2418202

// 유래. co.kr/questions/14220321/ajax-call에서 응답하는 방법/14220323 # 14220323 – 76484

, 당신은 당신의 프로그램의 작동 방식을 구조 조정해야합니다 : HTTP : 내가 당신에게 도움이 될 것입니다이 답변에서 살펴 본다 생각

function getData(callback) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari 
    if (window.XMLHttpRequest) { 
     xhr = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xhr.open("GET", "/submit222", true); 

    xhr.onreadystatechange = function(){ 
     if (xhr.readyState == 4 && xhr.status == 200) { 
      callback(JSON.parse(xhr.responseText)); 
     } 
    }; 

    xhr.send(); 
} 

function drawChart(myData) { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Number of Requests'); 

    var rows = new Array(5); 
    for (var i = 0; i < rows.length; i++) { 
     row[i] = [ new Date(myData[i][0]), myData[i][1] ]; 
    } 

    data.addRows(rows); 

    var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); 

    var options = { 
     displayAnnotations: true, 
    }; 

    chart.draw(data, options); 
} 
</script> 
</head>    
    <body onload="getData(drawChart)"> 
     <div id='chart_div' style='width: 900px; height: 500px;'></div> 
    </body> 
</html>

출처

2014-03-29 19:59:41 idbehold

Beautiful! 그러나 나는 한 가지 질문이있다. 차트는 정상적으로 보이지만 콘솔은 'Uncaught Error : 주어진 모든 행은 null 또는 배열이어야합니다.'라는 메시지를 출력합니다. rows.push ([new Date (myData [i] [0]))에'rows [i] = [new Date (myData [i] [0]), myData [i] [1] , myData [i] [1]]);'오류가 없지만 차트가 좀 재미있어 보입니다. 왜 이런 일이 일어나고 있는지 아십니까? 감사!! – user2418202

다른 함수에 xmlhttprequested 객체 전달하기

답변

관련 문제