Javascript 结合表单、JSON、AJAX、PHP和google图形

我对JScript、Ajax和GoogleGraphs非常陌生。但是我试图把所有的东西结合起来，我把它们都单独编码，让它们工作起来，但是把它们结合起来有很多问题

我的代码表单中的Google Graph部分在此不起任何作用：

纯文本版本希望从此处以字符串形式返回的表单中获取数据并将其绘制为图形：

当我尝试将两者结合起来时，只要我按下提交按钮，它就会打开一个新页面，并不断地说连接到www.google.com。有没有关于如何绘制txt数据的想法

以下是我的尝试，但没有成功： $document.readyfunction{ $graphinput.submitfunction{

                    // show that something is loading
                    $("#response").html("<b>Loading response...</b>");

                    /*
                     * "post_receiver.php" - where you will pass the form data
                     * $(this).serialize() - to easily read form data
                     * function(data){... - data contains the response from post_receiver.php
                     */
                    $.ajax({
                        type: "POST",
                        url: "get_sql_data.php", 
                        data: $(this).serialize()
                    })
                    .done(function(data){

                        // show the response
                        // Load the Visualization API and the piechart package.
                        google.load("visualization", "1", {"packages":["corechart"]});

                        // Set a callback to run when the Google Visualization API is loaded.
                        google.setOnLoadCallback(drawChart);

                        function drawChart() {

                                // Create our data table out of JSON data loaded from server.
                                var chartdata = new google.visualization.DataTable(data);

                                // Instantiate and draw our chart, passing in some options.
                                var chart = new google.visualization.LineChart(document.getElementById("response"));
                                chart.draw(chartdata, {width: 1600, height: 500});

                        }





                    })
                    .fail(function() {

                        // just in case posting your form failed
                        alert( "Posting failed." );

                    });

                    // to prevent refreshing the whole page page
                    return false;

                });
            });
            </script>

---

提前感谢您的帮助。

看到我的错误，我试图使用错误的数据类型绘制图表： 我当前的工作代码：

<script>
                //Load core chart visualization package
                google.load("visualization", "1", {packages: ["corechart"]});

                //On load call back initiate function
                google.setOnLoadCallback(getData);


                function getData() {

                $(document).ready(function(){
                    $("#graphinput").submit(function(){

                        // show that something is loading
                        $("#response").html("<b>Loading response...</b>");

                        /*
                         * "post_receiver.php" - where you will pass the form data
                         * $(this).serialize() - to easily read form data
                         * function(data){... - data contains the response from post_receiver.php
                         */
                        $.ajax({
                            type: "POST",
                            url: "get_sql_data.php",
                            dataType: "json",
                            data: $(this).serialize()

                        })
                        .done(function(data){

                            // show the response
                            //$("#response").html(data);
                            var chartdata = new google.visualization.DataTable(data);

                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.LineChart(document.getElementById("response"));
                            chart.draw(chartdata, {width: 1600, height: 500});

                        })
                        .fail(function() {

                            // just in case posting your form failed
                            alert( "Posting failed." );

                        });

                        // to prevent refreshing the whole page page
                        return false;

                    });
                });
                }

            </script>

---

与论坛网站不同，我们不使用感谢、感谢帮助或签名。请参阅。

                    // show that something is loading
                    $("#response").html("<b>Loading response...</b>");

                    /*
                     * "post_receiver.php" - where you will pass the form data
                     * $(this).serialize() - to easily read form data
                     * function(data){... - data contains the response from post_receiver.php
                     */
                    $.ajax({
                        type: "POST",
                        url: "get_sql_data.php", 
                        data: $(this).serialize()
                    })
                    .done(function(data){

                        // show the response
                        // Load the Visualization API and the piechart package.
                        google.load("visualization", "1", {"packages":["corechart"]});

                        // Set a callback to run when the Google Visualization API is loaded.
                        google.setOnLoadCallback(drawChart);

                        function drawChart() {

                                // Create our data table out of JSON data loaded from server.
                                var chartdata = new google.visualization.DataTable(data);

                                // Instantiate and draw our chart, passing in some options.
                                var chart = new google.visualization.LineChart(document.getElementById("response"));
                                chart.draw(chartdata, {width: 1600, height: 500});

                        }





                    })
                    .fail(function() {

                        // just in case posting your form failed
                        alert( "Posting failed." );

                    });

                    // to prevent refreshing the whole page page
                    return false;

                });
            });
            </script>

<script>
                //Load core chart visualization package
                google.load("visualization", "1", {packages: ["corechart"]});

                //On load call back initiate function
                google.setOnLoadCallback(getData);


                function getData() {

                $(document).ready(function(){
                    $("#graphinput").submit(function(){

                        // show that something is loading
                        $("#response").html("<b>Loading response...</b>");

                        /*
                         * "post_receiver.php" - where you will pass the form data
                         * $(this).serialize() - to easily read form data
                         * function(data){... - data contains the response from post_receiver.php
                         */
                        $.ajax({
                            type: "POST",
                            url: "get_sql_data.php",
                            dataType: "json",
                            data: $(this).serialize()

                        })
                        .done(function(data){

                            // show the response
                            //$("#response").html(data);
                            var chartdata = new google.visualization.DataTable(data);

                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.LineChart(document.getElementById("response"));
                            chart.draw(chartdata, {width: 1600, height: 500});

                        })
                        .fail(function() {

                            // just in case posting your form failed
                            alert( "Posting failed." );

                        });

                        // to prevent refreshing the whole page page
                        return false;

                    });
                });
                }

            </script>