-1

我想加载表单数据并将其发送到服务器，然后使用返回的数据绘制图表。如果表单的输入字段有默认数据并且我评论它工作正常

//$("button").click(function(){

如果默认文本字段为空，我不会得到任何图表。我尝试了不同的方法，但仍然无法通过单击按钮从表单中加载它。我现在被困了2天。请帮忙。提前致谢。这是代码

<script type="text/javascript">
var chart = null;
var dataString = [];
$(document).ready(function() {
    $("button").click(function() {
        $(function() {
            var city1 = $("#city1").val();
            var city2 = $("#city2").val();
            dataString = {
                city1: city1,
                city2: city2
            };

            requestData();
        });
    });

    function requestData() {
        $.ajax({
            url: 'array.php',
            type: 'POST',
            data: dataString,
            success: function(point) {
                var chartSeriesData = [];
                var chartCategory = [];
                $.each(point, function(i, item) {
                    var series_name = item.name;
                    var series_data = item.data2;
                    var cagory = series_name;

                    var series = {
                        name: series_name,
                        data: item.data2
                    };
                    chartSeriesData.push(series);
                    chartCategory.push(series_name);
                });
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'column',
                    },
                    title: {
                        text: 'Real time data from database'
                    },
                    xAxis: {
                        categories: chartCategory
                    },
                    yAxis: {
                        minPadding: 0.1,
                        maxPadding: 0.1,
                        title: {
                            text: 'Value',
                            margin: 40
                        }
                    },
                    series: chartSeriesData
                });
            },
            cache: false
        });
    }
});​
</script>

这是正文部分

<body>

<div id="container" style="min-width: 200px; height: 400px; margin: 0 auto"></div>

<div id="city_form">
  <form name="contact" action="" method="post">
      <label for="city1" id="city1_label">First city</label>
      <input type="text" name="city1" id="city1" size="30" value="Amsterdam" />


      <label for="city2" id="email_label">Second city</label>
      <input type="text" name="city2" id="city2" size="30" value="London" />
      <button>Click me</button> 
  </form>
</div>

</body>
</html>
4

1 回答 1

1

您在这里做了很多错误的事情，正如wirey指出的那样，其他您必须阻止单击按钮时提交表单。诶？当您单击提交按钮时，其默认操作是提交表单并将您带到action页面。您确实附加了一个附加的 eventListener，它会进行此 ajax 调用，然后绘制图表，但该按钮仍将执行其默认操作，即。带你到action页面，在你的情况下是同一个页面，所以你甚至没有意识到发生了这样的事情，你可能已经注意到闪烁或页面重新加载？

jQuery 允许通过调用事件对象上的方法来阻止此默认操作，该preventDefault()方法作为第一个参数传递给事件侦听器。你可以在这里阅读更多关于它的信息http://api.jquery.com/event.preventDefault/ 试试这个，让我们知道它是否有帮助。

HTML

<div id="city_form">
  <form name="contact" action="" method="post">
      <label for="city1" id="city1_label">First city</label>
      <input type="text" name="city1" id="city1" size="30" value="Amsterdam" />


      <label for="city2" id="email_label">Second city</label>
      <input type="text" name="city2" id="city2" size="30" value="London" />
      <button id="btnGet">Click me</button>
  </form>
</div>

JS

$("#btnGet").click(function(evt) {
    evt.preventDefault();
    var city1 = $("#city1").val();
    var city2 = $("#city2").val();
    var dataString = {
        city1: city1,
        city2: city2
    };
    requestData(dataString);

});

jsFiddle @ http://jsfiddle.net/jugal/V5zt9/6/

于 2012-08-11T06:19:23.047 回答