从表单运行的PHP脚本的进度条[关闭]

Question

I've done alot of googling and searching on stackoverflow about this and can't quite figure this out.

I've got a PHP script that is run via a form button to reserve access to a computer in a lab environment. The PHP script runs some vendor-specific commands to generate a username and password with specific privileges. This process takes approximately 20 seconds, and redirects to another page after completion. During this process though, the page just sits there without informing the user about what is going on.

I'd like to implement a progress bar. That part's easy enough and documented in too many places to count, but the way I want it to work may be impossible. I want the progress bar to be created on the same page as the form button is and be able to exchange information between the progress bar and the script itself (change the progress bar from 25 to 50% for instance after the second of the 4 commands in the script are run.) Is this possible? If not, I'm open to suggestions.

I've experimented with dynamically generating an iframe via onclick which runs the script (and build the progress bar into the PHP script), but how to exchange form data with the script via iFrame and change the URL of the parent page seems to excape me. Any help or suggestions are appreciated.

Edit: I've already got a loading animation running during the process which lasts until the redirect, but my goal is to replace it with the progress bar in question since I can specify a % or even a message for where in the process it is if theres a problem.

Answer 1

UPDATE: Using the jQuery javascript library for many of the utility functions.

The most basic method is to have a loading animation after user submits the form. Something like:

$('#your-form').submit( function() {
    $('body').append('<div class="loading"></div>');

    // perform validation here
    return true; // return false in validation to *not* submit form
});

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    z-index: 99999;
}

The next up is to use AJAX to poll your server to see if the task it is performing is complete.

$('#your-form').submit( function(event) {
    $('body').append('<div class="loading"></div>');

    // perform validation here

    $.post('/url-to-post-to', $(this).serialize(), function(data) {
        var form_status = setInterval( function() {
            $.get('/url-to-poll-status', { id: data.some_id_to_track_form_submission }, function(data) {
                if (data.complete) {
                    clearInterval(form_status);
                    // Do whatever you want, e.g. redirect to another page
                }
            }
        }, 500); // poll every 500ms
    });


    return false; // Always return false because we want to submit via ajax
});

And then there is one more: web sockets... This isn't fully supported by all browsers, but it's getting there. Research this by yourself as homework :P

The advantage of AJAX over normal form submission is the time it takes for your server to process the long request (which you mentioned being ~20s long). This process bogs up the server connection and can cause congestion if your incoming connection count exceeds the connection limit of your server.

The AJAX solution isn't just a slap on replacement for the standard form submission, you will also have to make backend changes:

• After receiving a valid form submission, spawn a process that handles the 20s stuff
• You will need to keep track of all these processes, i.e. completed or not
• You will also need an additional script/handler to allow users to query whether a process has been completed yet.

This answer is not meant to be a full solution but merely an insight into what you would need to do.