AJAX 요청을 통한 사용자 입력을 기반으로 Google 차트 다시 그리기 배경: 목표는 Google 차트를 업데이트하는 것입니다. 전체를 다시 로드할 필요 없이 AJAX를 통해 드롭다운 메뉴에서 사용자 선택에 따라 페이지. 문제: AJAX 호출의 초기 시도에서 오류가 발생합니다. $가 정의되지 않았습니다. 이는 코드에 jQuery 라이브러리 참조가 없기 때문일 가능성이 높습니다. 해결책: 문제를 해결하고 AJAX 기능을 활성화하려면 다음 단계를 따르십시오. jQuery 라이브러리 포함 참조: 추가 ;/스크립트> HTML <head> 섹션.</li></ul> </li> <li> <p><strong>데이터에 JSON 형식 사용:</strong></p> <ul><li>JSON 형식으로 데이터를 반환하도록 getdata.php 파일을 수정합니다. , Google 차트에서는 데이터에 대해 이 형식을 예상하므로 tables.</li></ul> </li> <li> <p><strong>Async: False 속성 제거:</strong></p> <ul><li>AJAX 요청에 async: false를 사용하지 마세요. 이러한 동기식 실행은 성능 문제로 이어질 수 있습니다.</li></ul> </li> <li> <p><strong>인라인 이벤트 핸들러 제거:</strong></p> <ul><li>다음과 같은 인라인 이벤트 핸들러를 사용하지 마세요. onchange. 대신 JavaScript를 통해 동적으로 추가된 이벤트 리스너를 사용하세요.</li></ul> </li> <li> <p><strong>차트 옵션에서 hAxis 및 vAxis를 한 번만 사용하세요:</strong></p> <ul><li> hAxis와 vAxis가 차트에 한 번만 나타나는지 확인하세요. options.</li></ul> </li> </ol> <p><strong>예제 코드:</strong></p> <p><strong>getdata.php:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><?php // ... Same database connection and query logic ... $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'Time', 'type' => 'string'), array('label' => 'Wind_Speed', 'type' => 'number'), array('label' => 'Wind_Gust', 'type' => 'number') ); while ($row = mysql_fetch_assoc($sqlResult)) { $temp = array(); $temp[] = array('v' => $row['Time']); $temp[] = array('v' => floatval($row['Wind_Speed'])); $temp[] = array('v' => floatval($row['Wind_Gust'])); $rows[] = array('c' => $temp); } $table['rows'] = $rows; echo json_encode($table); ?></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>HTML / JavaScript:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><html> <head> <!-- ... Same as original code ... --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> google.load('visualization', '1', { callback: function () { $("#users").change(drawChart); function drawChart() { $.ajax({ url: 'getdata.php', data: 'q=' + $("#users").val(), dataType: 'json', success: function (responseText) { var data = new google.visualization.DataTable(responseText); new google.visualization.LineChart(document.getElementById('visualization')). draw(data, { curveType: 'none', title: 'Wind Chart', titleTextStyle: { color: 'orange' }, interpolateNulls: 1 }); } }); } }, packages: ['corechart'] }); 로그인 후 복사 추가 참고 사항: 페이지가 완료된 후 콜백 함수를 사용하여 Google 차트를 로드하는 것이 좋습니다. 로드 중입니다. 잠재적인 문제를 처리하려면 AJAX 요청에 오류 처리를 추가하는 것이 좋습니다. 사용 중인 Google 차트 버전과 jQuery 라이브러리 버전이 호환되는지 확인하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
