Question

我想加载表单数据并将其发送到服务器，然后使用返回的数据进行图表处理。如果表单的输入字段具有默认数据并且我发表评论

，它可以正常工作

//$("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>

Answer 1

你在这里错误地做了很多事情，一个是粗线条指出的，另一个你必须在点击按钮时阻止表单提交。嗯？单击“提交”按钮时，其默认操作是提交表单并转到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/

通过点击和图表获取表单数据，其中包含highchart中的数据

1 个答案: