我正在通过APACHE 2 Web服务器开发Web应用程序。当我执行dropbox.html文件时,它会产生一个下拉菜单,该菜单使用PHP创建了htdocs目录中的所有文件。这是我的文件要处理的地方。选择文件后,将调用javascript函数,这需要很长时间才能使用perl脚本等分析文件。最终的结果是我希望生成一个图形并在处理完成后出现。在具有下拉菜单之前,我已经使图形起作用,我只是拥有一个调用此相同JS函数的按钮,并且在单个硬编码文件上都能正常工作。这是我的问题:现在我可以使用下拉框了,我可以看到[正确地]弹出了图形,但是它只进行了一秒钟,然后整个页面重置回起始形式[将显示第一个下拉菜单中的文件]。如何停止重置?即,当我从下拉菜单中单击某项内容时,该文件应保留在该文件中,直到我对其进行更改为止。我希望我的图表保持不动,直到用户选择另一个文件来处理。
这是我的dropbox.html文件的摘录。首先,我的保管箱代码。我省略了标准的html代码,只是向您展示了您需要的肉。
<!--The following is php code which gets the files in the current directory and
populates a drop down menu with those files, it calls the openfilex method-->
<form name="filex" method="get" action="" onsubmit="openfilex()">
<select name="select">
<?php
$files = array_map("htmlspecialchars", scandir("."));
foreach ($files as $file)
echo "<option value='$file'>$file</option>";
?>
</select>
<input type="submit" value="Choose File">
</form>
接下来调用它的JS函数。您可以看到我的JS函数调用了perl脚本,将文件名作为参数传递,并从正在解析的perl脚本返回数据(所有pops,pushs)。当您开始看到HitCntGraph时,这些都是对我具有plot.js的javascript库的调用,这些方法是用于创建和绘制图形的方法。以前应该没有问题。
<script type="text/javascript">
//The following is the function associated with the event: file selected
function openfilex(){
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
var str, wordCnt, word;
if (xmlhttp.readyState==4 && xmlhttp.status==200) { // Get the results of the perl script
// Get the complete string
str = xmlhttp.responseText;
str = str.substring(24);
//alert(str);
// Split it into the numberical results adding the keywords at the end as a long string
wordCnt = str.split("-");
//get the big string at the end
word = wordCnt.pop();
// Now split apart this big word into an array of the key words
word = word.split(",");
//we must pop the last element off since the string ended in an ',' which means there
//is an extra element on this array [empty]
word.pop();
//word is now an array whose elements are each a keyword
//alert(word);
//wordCnt is now an array whose elements are each a keyword count
//alert(wordCnt);
var length = wordCnt[0]; //get the numer of xaxis ticks
for(var i=0; i < length; i++) { //initialize the x-axis array
wordCnt[i] = wordCnt[i+1];
}
//this will leave an extra element on the end [we essentially shrunk our array by one] so we pop this off.
wordCnt.pop();
// Create the graph [see the library]
HitCntGraph = new MakeDraw();
HitCntGraph.grid=1;
HitCntGraph.enumerateP = 0;
HitCntGraph.id="HitCntGraphCanvas";
HitCntGraph.data = wordCnt; // data to plot amplitude
HitCntGraph.dataUnit = " Hits "; // few extra spaces make more space on the left
HitCntGraph.dataColor = wordCnt; // data to plot colors
HitCntGraph.dataColorUnit = ""; //we do not need an extra unit for color, so use the empty string
HitCntGraph.horizontalArray = word; // my indices
HitCntGraph.enableMouseMove = 1;
HitCntGraph.enableMouseDown = 1;
//HitCntGraph.mouseMoveFunctionAssociated = showData;//triggerMouseMove; shows what data array index are you pointing on
//HitCntGraph.mouseDownFunctionAssociated = showData;//triggerMouseDown;
HitCntGraph.enumerateH = 1;
HitCntGraph.title = "Keywords";
// optional HitCntGraph.maximum = 255;
// optional HitCntGraph.maximum = 255;HitCntGraph.minimum = 0.0001;
HitCntGraph.plot();
}
}
//get the filename that was selected from php code
var file = document.filex.select.value;
//call the perl script, passing the filename as a parameter
xmlhttp.open(
'GET',
'dropdown.pl?name=' + encodeURIComponent(file),
false
);
xmlhttp.send();
}
</script>
表单,标头和JS函数都在我的头部。然后跟随主体部分,这是我要绘制图形的地方,如下所示:
<body>
<script src="plot_v2.js"></script>
<canvas width="1000" height="300" id="HitCntGraphCanvas" style=""></canvas>
<!-- This div is only needed if mouseMoveFunctionAssociated is used -->
<div id="outputArea"></div>
</body>
因此,明智的做法,这与我的较旧版本[在下拉菜单之前]相同。我已经测试了它的每一个步骤,以确保所有组件都能正常工作。我走到了尽头,就像我说的那样,当我按Submit时,我什至可以看到生成了CORRECT图...尽管它只能停留一秒钟。我希望它保留在下拉菜单下方的屏幕上,直到用户选择另一个文件进行提交和处理。请帮忙?!
最佳答案
您的JS事件处理程序需要return false
(或者您可以在preventDefault()
对象上调用event
),以防止表单实际提交回页面(并导致页面刷新)