从表单中获取输入并使用Ajax和jQuery在Google图表中输出结果的问题_Jquery_Html_Json_Ajax_Google Visualization

从表单中获取输入并使用Ajax和jQuery在Google图表中输出结果的问题

jquery html json ajax google-visualization

从表单中获取输入并使用Ajax和jQuery在Google图表中输出结果的问题,jquery,html,json,ajax,google-visualization,Jquery,Html,Json,Ajax,Google Visualization,我目前正在尝试创建一个spike，通过jQuery和Ajax以及GoogleCharts API动态加载Google图表的内容，但遇到了一些问题在代码的当前点，我尝试使用一个表单从用户检索数据，然后在警报中输出结果在GoogleChart函数调用中确定数据实际上是被发送到程序中的那个点。目前，这不是一个问题发生时，testFunction（）调用没有输出任何内容下面是我目前使用的全部代码 <!DOCTYPE html> <html> <

我目前正在尝试创建一个spike，通过jQuery和

Ajax

以及

GoogleCharts API

动态加载Google图表的内容，但遇到了一些问题

在代码的当前点，我尝试使用一个表单从用户检索数据，然后在警报中输出结果在GoogleChart函数调用中确定数据实际上是被发送到程序中的那个点。目前，这不是一个问题发生时，

testFunction（）

调用没有输出任何内容

下面是我目前使用的全部代码

<!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>


google.charts.load（'current'{
“包”：[“核心图表”]
});
google.charts.setOnLoadCallback（drawChart）；
功能图（数据）{
警惕（“我们正到达这一点！”）；
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]
]);
变量选项={
标题：“厚脸皮的鹈鹕”，
哈克斯：{
标题:"年",，
titleTextStyle：{
颜色：“#333”
}
},
言辞：{
最小值：0
},
背景颜色：{
填充：“透明”
},
言辞：{
网格线：{
颜色：“#AC935D”
}
},
颜色：['#87734A'、'红色'、'黑色']，
};
var chart=new google.visualization.AreaChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}
$（函数（）{
$（“#datepicker1”）.datepicker（）；
$（“#datepicker2”）.datepicker（）；
});
$（文档）.ready（函数（）{}）；
日期1:

日期2:

函数testFunction（）{
警报（“正在调用TESTFUNCTION！”）；
var测试=document.getElementById（“formid”）.getElementsByTagName（“日期1”）；
var test2=document.getElementById（“formid”）.getElementsByTagName（“date2”）；
警报（测试）；
警报（test2）；
$.ajax({
url:'ajax.php'，
键入：“POST”，
数据类型：“json”，
数据：{formid}
成功：功能（结果）{
绘图（结果）；
}
错误：函数（）{
警报（“错误”）；
}
});
}

我不完全确定我的

Ajax

代码此时是否正确，因为我是这个领域的新手。我的想法是，我希望从与

Ajax

函数相同的文件中检索数据，因为这就是该函数在我的网站中完全实现后的工作方式

我做错了什么？

让我们从

ajax

调用开始

缺少两个逗号，这将导致语法错误。
请参阅以下代码段中的注释

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

HTML


日期1:

日期2:

希望这有帮助，您可以在浏览器的开发人员控制台中找到这些错误——通常按F12键。您刚刚尝试了这一点，它似乎已经修复了ajax调用。但是，我在读取表单中的数据时仍然遇到问题。。有什么想法吗？谢谢你的编辑。在浏览器中加载更新的代码时，我一直在监视控制台，发现它在ajax调用中不断返回错误。在ajax.php中查找表单数据/信息似乎有问题。据我所知，ajax.php引用的文件与ajax正在运行的文件相同，这是否正确？我不确定是否遵循，抛出了什么错误？php应该是处理表单数据并返回json的php页面的url。它可以是同一个页面，但不一定是…我正在尝试从中检索数据的PHP文件收到403错误。编辑中的HTML和JAVASCRIPT代码是否允许存在于同一文件中？我希望从HTML中检索这些值，并使用JAVASCRIPT将这些值发送到PHP，以从数据库中获得响应。

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']
});

<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>