如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？-php教程-PHP中文網

根據透過AJAX 要求的用戶輸入重新繪製Google 圖表

首頁

後端開發

php教程

如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？

Susan Sarandon

Dec 10, 2024 pm 08:39 PM

How can I dynamically update a Google Chart using AJAX based on user dropdown selection without page reload?

根據透過AJAX 要求的用戶輸入重新繪製Google 圖表

背景：

目標是更新Google 基於圖表用戶透過AJAX 從下拉式選單中進行的選擇，而無需重新載入整個頁面。

問題：

首次嘗試 AJAX 呼叫會產生錯誤：$ 未定義。這很可能是由於程式碼中缺少 jQuery 函式庫引用。

解決方案：

要解決該問題並啟用AJAX 功能，請按照以下步驟操作：

包含jQuery庫參考：
- 新增
使用JSON 格式取得資料：
- 修改getdata.php 檔案以JSON 格式傳回數據，因為Google 圖表期望這種資料格式
刪除Async: False屬性：
- 不要在 AJAX 請求中使用 async: false。這種同步執行可能會導致效能問題。
刪除內聯事件處理程序：
- 避免使用內聯事件處理程序，例如onchange。相反，使用透過 JavaScript 動態新增的事件偵聽器。
在圖表選項中只使用一次 hAxis 和 vAxis：
- 確保 hAxis 和 vAxis在圖表中只出現一次

範例程式碼：

getdata.php:

<?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);
?>

登入後複製

HTML / JavaScript:

<html>
  <head>
    <!-- ... Same as original code ... -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      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']
      });
    </script>
  </head>
  <body>

登入後複製

附加說明:

頁面完成後使用回調函數加載 Google 圖表是一個很好的做法正在加載。
考慮向 AJAX 請求添加錯誤處理以處理潛在的問題問題。

確保驗證 jQuery 函式庫版本與正在使用的 Google 圖表版本相容。

以上是如何根據使用者下拉選擇使用 AJAX 動態更新 Google 圖表，而無需重新載入頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1317

PHP教程

1268

C# 教程

1246

Related knowledge

PHP和Python：比較兩種流行的編程語言 Apr 14, 2025 am 12:13 AM

PHP和Python各有優勢，選擇依據項目需求。 1.PHP適合web開發，尤其快速開發和維護網站。 2.Python適用於數據科學、機器學習和人工智能，語法簡潔，適合初學者。

PHP行動：現實世界中的示例和應用程序 Apr 14, 2025 am 12:19 AM

PHP在電子商務、內容管理系統和API開發中廣泛應用。 1)電子商務：用於購物車功能和支付處理。 2)內容管理系統：用於動態內容生成和用戶管理。 3)API開發：用於RESTfulAPI開發和API安全性。通過性能優化和最佳實踐，PHP應用的效率和可維護性得以提升。

說明PHP中的安全密碼散列（例如，password_hash，password_verify）。為什麼不使用MD5或SHA1？ Apr 17, 2025 am 12:06 AM

在PHP中，應使用password_hash和password_verify函數實現安全的密碼哈希處理，不應使用MD5或SHA1。1)password_hash生成包含鹽值的哈希，增強安全性。 2)password_verify驗證密碼，通過比較哈希值確保安全。 3)MD5和SHA1易受攻擊且缺乏鹽值，不適合現代密碼安全。

PHP：網絡開發的關鍵語言 Apr 13, 2025 am 12:08 AM

PHP是一種廣泛應用於服務器端的腳本語言，特別適合web開發。 1.PHP可以嵌入HTML，處理HTTP請求和響應，支持多種數據庫。 2.PHP用於生成動態網頁內容，處理表單數據，訪問數據庫等，具有強大的社區支持和開源資源。 3.PHP是解釋型語言，執行過程包括詞法分析、語法分析、編譯和執行。 4.PHP可以與MySQL結合用於用戶註冊系統等高級應用。 5.調試PHP時，可使用error_reporting()和var_dump()等函數。 6.優化PHP代碼可通過緩存機制、優化數據庫查詢和使用內置函數。 7

PHP如何安全地上載文件？ Apr 10, 2025 am 09:37 AM

PHP通過$\_FILES變量處理文件上傳，確保安全性的方法包括：1.檢查上傳錯誤，2.驗證文件類型和大小，3.防止文件覆蓋，4.移動文件到永久存儲位置。

PHP類型提示如何起作用，包括標量類型，返回類型，聯合類型和無效類型？ Apr 17, 2025 am 12:25 AM

PHP類型提示提升代碼質量和可讀性。 1)標量類型提示：自PHP7.0起，允許在函數參數中指定基本數據類型，如int、float等。 2)返回類型提示：確保函數返回值類型的一致性。 3)聯合類型提示：自PHP8.0起，允許在函數參數或返回值中指定多個類型。 4)可空類型提示：允許包含null值，處理可能返回空值的函數。