1

我正在通过 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, pushes]。当您开始看到 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 函数都在我的 head 部分。然后跟随正文部分，我希望在其中绘制图表，如下所示：

<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>

所以，明智的，这与我的旧版本 [在下拉菜单之前] 相同。我已经对它的每一步都进行了测试，以确保所有组件都能正常工作。我走到了最后，就像我说的那样，当我按下提交时，我什至可以看到生成的正确图表......虽然它只停留了一秒钟。我希望它留在下拉菜单下方的屏幕上，直到用户选择另一个文件来提交和处理。请帮忙？！

4

2 回答 2

2

您的 JS 事件处理程序需要return false（或者，您可以调用preventDefault()对象event）以防止表单实际提交回页面（并导致页面刷新）

于 2013-07-11T17:49:35.503 回答
0

您可以将 更改<input type="submit" value="Choose File" />为<input type="button" value="Choose File" onClick="openfilex()" />，但是您必须将文件名作为函数参数发送。

于 2013-07-11T18:05:56.807 回答