javascript - Flot 绘制图表然后无缘无故重定向

Question

我正在使用 flot 绘制一些数据图表。我在表格中输入开始日期和结束日期，然后检索要绘制图表的数据。图表暂时正确显示，但随后 url 被重定向到同一页面，但附加了不存在的“?0=on&1=on&2=on&3=on&4=on&5=on”。这是我的代码:

    <form onsubmit='formValidator()' >
        Start Date: <input type='text' id='date1' /><br />
        End Date: <input type='text' id='date2' /><br />
    <input type='submit' value='Go' />

    <div align="center"><div id="placeholder" style="width:80%; height: 700px"></div></div>

    <p id="choices" style="color:#FFFFFF">Show:</p>

    <script type="text/javascript" id="source">


function formValidator(){
    // Make quick references to our fields
    var d1 = document.getElementById('date1');
    var d2 = document.getElementById('date2');
    var msg = "Please enter the date in the format yyyymmdd. e.g. 20110609 for June 9, 2011";
    // Check each input in the order that it appears in the form!
    if(notEmpty(d1, msg)&& notEmpty(d2, msg) && isNumeric(d1, msg)&& isNumeric(d2, msg)&& lengthRestriction(d1, msg)&& lengthRestriction(d2, msg)){
        $(function () {
                var date1   = d1.value;
                var date2   = d2.value;

/* foo1-6 are arrays that get their assigned values here */

                var datasets    =   [
                    {label: "Foo1", data: foo1      },
                {label: "Foo2", data: foo2      },
                {label: "Foo3", data: foo3      },
                {label: "Foo4", data: foo4      },
                {label: "Foo5", data: foo5      },
                {label: "Foo6", data: foo6      }
                ];

                // hard-code color indices to prevent them from shifting as
                // options are turned on/off
                var i = 0;
                $.each(datasets, function(key, val) {
                    val.color = i;
                    ++i;
                });


                // insert checkboxes 
                var choiceContainer = $("#choices");
                $.each(datasets, function(key, val) {
                    choiceContainer.append('<br/><input type="checkbox" name="' + key +
                                           '" checked="checked" id="id' + key + '">' +
                                           '<label for="id' + key + '">'
                                            + val.label + '</label>');
                });
                choiceContainer.find("input").click(plotAccordingToChoices);



                function plotAccordingToChoices() {
                    var data = datasets;

                    choiceContainer.find("input:checked").each(function () {
                        var key = $(this).attr("name");
                        if (key && datasets[key])
                            data.push(datasets[key]);
                    });

                    if (data.length > 0)    {
                        var options =   {
                            legend: {
                                backgroundColor: "#000000",
                                backgroundOpacity: 0.9,
                                labelFormatter: function(label,series) {
                                    return "<div style=color:#FFFFFF>" + label + "</div>";
                                }
                            },
                            yaxis: { min: 0 },
                        }
                    };
                    $.plot($("#placeholder"), data, options);
                }

                plotAccordingToChoices();

            });
    }   
}

Answer 1

必须得出结论，页面上还有一些其他 javascript 导致了该行为:您是否将页面缩减为仅 jquery、flot 和数据源，并确保您没有其他用户提供的 javascript 导致重新加载？ flot 库中没有任何内容会导致自动重新加载，所以我猜这是您的应用程序所部署的框架的一些产物。