如何在不使用表单的情况下将JavaScript请求从服务器提交到服务器

Question

This a local webserver app

I have a form representing progress with a single submit button, this submits to my server and then the server will construct a new page with updated progress bars, so the users see the progress bars updated every time they click on the 'Check Progress' button.

But what I wanted it to do is automatically check every 5 seconds without needing the user to press button. So I have a javasscript that submits the form after 5 seconds, so every 5 seconds the page is replaced with a new page with updated progress bars.

This works great, so now I dont need the form button. But If i remove the form then my javascript wont work because I no longer have a form to submit.

I read I can use Ajax to talk to server, receive updated data and update existing page. But I dont want to do this i want to keep javascript to a minimum as I find it very difficult to get it working.

I just want the javascript to make request to server that will then replace existing page with new updated page, but how do I make a simple getrequest to server using javascript.

This is what I currently have

....

<tr>
    <td>
        <label for="pb12">
            Errors
        </label>
    </td>
    <td>
        <progress id="pb12" value="0" max="100">
        </progress>
    </td>
</tr>
</table>
<form action="/check_progress" id="check_progress">
    <p>
        <input type="submit" value="Check Progress">
    </p>
</form>
<script>function checkprogress() { document.getElementById('check_progress').submit(); }; setTimeout(checkprogress, 5000)</script></body>
</html>

Answer 1

So how can you reload the page without a form? Meta refresh tag

<meta http-equiv="refresh" content="5">

Just make sure you have the proper no cache headers.

Or use JavaScript to reload the page

window.location.reload(true);

Or just submit the form

document.getElementById("yourForm").submit()

or change the backend to return just the updated content and spit that out with an Ajax call.