如何在表单提交按钮点击后刷新页面，然后用JavaScript显示结果？

我知道这是一个简单的问题，但我在网上研究并尝试了很多东西，但都没有成功

我正在制作一个简单的文件传输时间估计器，我只需要重新加载页面，然后在单击“计算”按钮时显示结果。（类似于用PHP制作时的工作方式。）

我要么陷入重新加载循环，要么在尝试执行此操作时丢失表单数据。单击submit按钮时，我正在向URL添加变量，我希望用户转到该页面（刷新），并将结果滚动到视图中

下面是相关的HTML

        <div class="content"> 



<form onsubmit="return false">
<div id="speed">
    <h3>How fast is your transfer speed?</h3>


    <p>
        <label for="internetSpeed">File Transfer Speed</label>
        <input id="internetSpeed_p" type="button" value="+" onclick="internetSpeed.value = (parseInt(internetSpeed.value)+1).toFixed(2)">
        <input id="internetSpeed" type="number" min="0" step="0.01" value="10" placeholder="File Transfer speed" autofocus>


        <input id="internetSpeed_p" type="button" value="-" onclick="internetSpeed.value = (parseInt(internetSpeed.value)-1).toFixed(2)">

        <select id="internetSpeedBase">
            <option value="10^3">Kbps</option>
            <option value="10^6" selected>Mbps</option>
            <option value="10^9">Gbps</option>

        </select>
    </p>


    <div>
        <label class="collapse" for="_1">?</label>
        <input id="_1" type="checkbox">
        <div>
            <p class="overhead-p"><label for="internetOverhead">Overhead</label>
                <select id="internetOverhead">
                    <option value="1" selected>None</option>
                    <option value="0.99">1%</option>
                    <option value="0.95">5%</option>
                    <option value="0.9">10% (Typical TCP overhead)</option>
                    <option value="0.85">15%</option>
                    <option value="0.8">20%</option>
                    <option value="0.75">25%</option>
                    <option value="0.7">30%</option>
                    <option value="0.6">40%</option>
                    <option value="0.5">50%</option>
                    <option value="0.4">60%</option>
                    <option value="0.3">70%</option>
                    <option value="0.2">80%</option>
                    <option value="0.1">90%</option>
                    <option value="0.05">95%</option>
                    <option value="0.01">99%</option>
                </select>

            </p>
        </div>
    </div>  
</div>

<div id="file">
    <h3>What is the size of the file you want to transfer?</h3>
    <p> 
        <label for="fileSize">File Size</label>
        <input id="internetSpeed_p" type="button" value="+" onclick="fileSize.value = (parseInt(fileSize.value)+1).toFixed(2)">

        <input type="number" id="fileSize" value="1" step="0.01" min="0">

        <input id="internetSpeed_p" type="button" value="-" onclick="fileSize.value = (parseInt(fileSize.value)-1).toFixed(2)">
        <select id="fileSizeBase">
            <option value="2^10">KB </option>
            <option value="2^20">MB </option>
            <option value="2^30" selected>GB </option>
            <option value="2^40">TB </option>
        </select>
    </p>

    <p>
        <button id="calculateButton"  >Calculate</button>
    </p>
</div>

</form>

<div id="results">
    <div id="results_inner">                
        <p class="">It would take</p>
        <p class="time">0</p>
        <p class="">to transfer <span class="size"></span> </p>
        <p class="">at <span class="speed"></span>/sec</p>
    </div>
    <hr>
</div>

---

非常感谢您的帮助。

请搜索PHPAJAX@mplungjan谢谢你的评论，但我不想用PHPAJAX做这件事。而且，如果我是对的，我希望与AJAX完全相反。我希望页面刷新，然后显示结果。使用jquery

$（document）.ready（function（）{//your function或code}）。每当页面刷新文档就绪功能触发时，如果没有涉及服务器端，则需要另一种方法来持久化结果（因为默认情况下页面本质上是无状态的）。您是否考虑过使用localstorage之类的工具？或者，更好的是，放弃重新加载页面，只需使用Javascript操作所有内容，以显示/隐藏/添加/删除相关元素。请单击
按钮，包括所有相关代码（矩和精度因子），注释掉localStorage的内容，因为它在这里不起作用-然后你有一个-然后告诉我们你需要脚本实现什么，而不是你认为你需要做什么（X/Y问题）
window.onload=function(){

calculateButton.onclick = calc;


if(window.location.hash){
    var uri = window.location.hash;
    internetSpeed.value = uri.match(/speed=([\d.]+)x(\d+\^\d+)/)[1];
    internetSpeedBase.value = uri.match(/speed=([\d.]+)x(\d+\^\d+)/)[2];
    internetOverhead.value = uri.match(/overhead=([\d.]+)/)[1];

    fileSize.value = uri.match(/file=([\d.]+)x(\d+\^\d+)/)[1];
    fileSizeBase.value = uri.match(/file=([\d.]+)x(\d+\^\d+)/)[2];

    calc();
}
else if(window.localStorage){
    if(window.localStorage.getItem('downloadtime.speed')){
        internetSpeed.value = window.localStorage.getItem('downloadtime.speed');
        internetSpeedBase.value = window.localStorage.getItem('downloadtime.speedBase');
        internetOverhead.value = window.localStorage.getItem('downloadtime.overhead');
        fileSize.value = window.localStorage.getItem('downloadtime.file');
        fileSizeBase.value = window.localStorage.getItem('downloadtime.fileBase');
    }
    else defaults();
}
else defaults();


};

function defaults(){
internetSpeed.value = "10";
internetSpeedBase.value = "10^6";
internetOverhead.value = "0.9";
fileSize.value = "1";
fileSizeBase.value = "2^30";
}

function calc(){

// Internet speed

var internet = {
    speed: internetSpeed.value,
    factor: internetSpeedBase.value,
    overhead: internetOverhead.value,
}

internet.speed = parseFloat(internet.speed);
internet.overhead = parseFloat(internet.overhead);
internet.factor = {
    base: internet.factor.match(/(\d+)\^(\d+)/)[1],
    power: internet.factor.match(/(\d+)\^(\d+)/)[2]
}

internet.bitsPerSec = internet.speed * Math.pow(internet.factor.base, internet.factor.power);
internet.bytesPerSec = internet.bitsPerSec/8;

//File size

var file = {
    size: fileSize.value,
    factor: fileSizeBase.value,
}

file.size = parseFloat(file.size);
file.factor = {
    base: file.factor.match(/(\d+)\^(\d+)/)[1],
    power: file.factor.match(/(\d+)\^(\d+)/)[2]
}
file.bytes = file.size * Math.pow(file.factor.base, file.factor.power);

//speed
internet.effectiveBytesPerSec = internet.bytesPerSec * internet.overhead;

//download time in milliseconds
var transferTime_ms = (file.bytes/internet.effectiveBytesPerSec)*1000;


if(window.location){
    var uri=[];
    uri.push("file="+fileSize.value+"x"+fileSizeBase.value);
    uri.push("speed="+internetSpeed.value+"x"+internetSpeedBase.value);
    uri.push("overhead="+internetOverhead.value);
    window.location.hash = uri.join("&");
}

if(window.localStorage){        
    window.localStorage.setItem('downloadtime.speed', internetSpeed.value);
    window.localStorage.setItem('downloadtime.speedBase', internetSpeedBase.value);
    window.localStorage.setItem('downloadtime.overhead', internetOverhead.value);
    window.localStorage.setItem('downloadtime.file', fileSize.value);
    window.localStorage.setItem('downloadtime.fileBase', fileSizeBase.value);
}


//Show results
document.querySelector("#results .time").innerHTML = moment.preciseDiff(0, transferTime_ms);
document.querySelector("#results .size").innerHTML = prefixByteLong(file.bytes);
document.querySelector("#results .speed").innerHTML = prefixByte(internet.effectiveBytesPerSec);

document.getElementById("results").style.visibility = "visible";

document.getElementById("results").scrollIntoView();

}