使用Ajax和jQuery在Google Chart中輸入結果並輸出結果的問題

我目前正在嘗試創建一個使用jQuery和Ajax和Google Charts API爲Google圖表動態加載內容的秒殺，但我正在運行成幾個問題。使用Ajax和jQuery在Google Chart中輸入結果並輸出結果的問題

在代碼中的當前點，我試圖用一種形式來檢索用戶，然後將結果輸出數據在警告在谷歌圖的函數調用來確定該數據實際上是被髮送到程序中的那一點。目前，這不是正在發生，testFunction()呼叫沒有輸出任何內容。

下面是我目前正在使用它的全部，我不能完全肯定，如果我的Ajax代碼是在這個時間點正確的，因爲我是新來這個代碼...

<!DOCTYPE html> 
    <html> 

    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
     <script type="text/javascript"> 
      google.charts.load('current', { 
       'packages': ['corechart'] 
      }); 
      google.charts.setOnLoadCallback(drawChart); 

      function drawChart(data) { 
       alert("WE ARE REACHING THIS POINT!"); 
       var data = google.visualization.arrayToDataTable([ 
        ['Days', 'test1', 'test2', 'test3'], 
        ['19/07/2016', 10, 5, 3], 
        ['20/07/2016', 5, 4, 2], 
        ['21/07/2016', 15, 3, 1], 
        ['22/07/2016', 2, 1, 2] 
       ]); 

       var options = { 
        title: 'CHEEKY PELICANS', 
        hAxis: { 
         title: 'Year', 
         titleTextStyle: { 
          color: '#333' 
         } 
        }, 
        vAxis: { 
         minValue: 0 
        }, 
        backgroundColor: { 
         fill: 'transparent' 
        }, 
        vAxis: { 
         gridlines: { 
          color: '#AC935D' 
         } 
        }, 
        colors: ['#87734A', 'red', 'black'], 
       }; 

       var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 
     </script> 

     <script> 
      $(function() { 
       $("#datepicker1").datepicker(); 
       $("#datepicker2").datepicker(); 
      }); 
     </script> 

     <script type="text/javascript"> 
      $(document).ready(function() {}); 
     </script> 
    </head> 

    <body> 
     <div id="chart_div" style="width: 900px; height: 500px;"></div> 

     <form id="formid" name="formname" method="post" onsubmit="return testFunction();"> 
      Date1: <input type="text" name="date1" id="datepicker1"> <br/> 
      Date2: <input type="text" name="date2" id="datepicker2"> <br/> 
      <input type="submit" value="Submit"> 
     </form> 

     <script type="text/javascript"> 
      function testFunction() { 
       alert("TESTFUNCTION IS BEING CALLED!"); 
       var test = document.getElementById("formid").getElementsByTagName("date1"); 
       var test2 = document.getElementById("formid").getElementsByTagName("date2"); 
       alert(test); 
       alert(test2); 

       $.ajax({ 
        url: 'ajax.php', 
        type: 'POST', 
        dataType: 'json', 
        data: { formid } 
        success: function(result) { 
         drawChart(result); 
        } 

        error: function() { 
         alert("error"); 
        } 
       }); 
      } 
     </script> 
    </body> 

    </html>

區。我的想法是，我想從Ajax函數獲取相同文件中的數據，因爲這是該函數在完全實現到我的網站後的工作方式。

我在做什麼錯誤？

來源

2016-08-02 TheAuzzieJesus

讓我們先從ajax電話...

有一對夫婦失蹤逗號，這將導致語法錯誤。
看評論在下面的代碼片段...

$.ajax({ 
    url: 'ajax.php', 
    type: 'POST', 
    dataType: 'json', 
    data: { formid }, //<-- need comma 
    success: function(result) { 
     drawChart(result); 
    }, //<-- need comma 
    error: function() { 
     alert("error"); 
    } 
});

編輯

總的來說，我設置的代碼是這樣的......

你可以依靠callback從google知道什麼時候加載頁面時
所以google.charts.load第一

未來，而是採用內<form>
使用jQuery onsubmit在線監聽事件 - >$("#formid").submit(drawChart);

使用preventDefault保持頁面從重裝

發送的序列化形式data

最後，如果在形式googleajax.php返回有效的JSON喜歡
可以從result

看到下面的代碼片段直接創建DataTable，它包括你可能使用的邏輯，
設置默認日期時，第一次加載頁面

的JavaScript

google.charts.load('current', { 
    callback: function() { 
    var dateFormatter; 
    var firstDayOfMonth; 
    var today; 

    // set default dates 
    dateFormatter = new google.visualization.DateFormat({ 
     pattern: 'MM/dd/yyyy' 
    }); 
    today = new Date(); 
    firstDayOfMonth = dateFormatter.formatValue(new Date(
     today.getFullYear(), today.getMonth(), 1 
    )); 
    today = dateFormatter.formatValue(today); 

    // setup date pickers 
    $("#datepicker1").datepicker(); 
    $("#datepicker1").val(firstDayOfMonth); 
    $("#datepicker2").datepicker(); 
    $("#datepicker2").val(today); 

    // draw chart with default dates 
    drawChart(null); 

    // draw chart when form is submitted 
    $("#formid").submit(drawChart); 

    function drawChart(event) { 
     if (event !== null) { 
     event.preventDefault(); 
     } 

     $.ajax({ 
     url: 'ajax.php', 
     type: 'POST', 
     dataType: 'json', 
     data: $('#formid').serialize(), 
     success: function(result) { 
      var chart; 
      var data; 
      var options; 

      data = new google.visualization.DataTable(result); 

      options = { 
      title: 'CHEEKY PELICANS', 
      hAxis: { 
       title: 'Year', 
       titleTextStyle: { 
       color: '#333' 
       } 
      }, 
      vAxis: { 
       minValue: 0 
      }, 
      backgroundColor: { 
       fill: 'transparent' 
      }, 
      vAxis: { 
       gridlines: { 
       color: '#AC935D' 
       } 
      }, 
      colors: ['#87734A', 'red', 'black'], 
      }; 

      chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
      console.log(errorThrown + ': ' + textStatus); 
     } 
     }); 
    } 
    }, 
    packages: ['corechart'] 
});

HTML

<div id="chart_div" style="width: 900px; height: 500px;"></div> 

<form id="formid" name="formname" method="post"> 
    Date1: <input type="text" name="date1" id="datepicker1"> <br/> 
    Date2: <input type="text" name="date2" id="datepicker2"> <br/> 
    <input type="submit" value="Submit"> 
</form>

來源

2016-08-02 12:29:21 WhiteHat

希望這會有所幫助，你可以找到在瀏覽器的開發者控制檯，這些錯誤 - 通常是通過按下F12 – WhiteHat

只是嘗試這樣做，它似乎已經解決了Ajax調用。我仍然在閱讀表格中的數據，但仍然存在問題..任何想法？ – TheAuzzieJesus

請參閱__EDIT__以上答案... – WhiteHat

使用Ajax和jQuery在Google Chart中輸入結果並輸出結果的問題

回答

相關問題