在$ .ajax调用上创建一个进度条

Question

I want to display a progress bar when I click on a button to load content through ajax. As soon as I create the $.ajax call, the communication goes to a php file on the server which scrapes data from another file on the server. And it takes a good 7-8 seconds to bring in the data.

I want to display a progress loader at the time of making the ajax request. I was looking on the internet and couldnt find a simple solution. All I could find were complex upload file scripts which would take an awful while to customize to perform this simple operation. If anybody can help, that'd be great. Else I'd have to make do with the spinner.

Answer 1

Because all other answers are just about showing a placeholder image or text or just faking it, here's how you could do it (just a description, no code - but the only hard part is determining how much of the work is actually done):

Edit the php script you call via $.ajax to calculate the percentage of work it has completed - how you would do this is extremely dependend on the tast the script does and as such can be extremely easy (for example, when you're just iterating over an array of things to process which each take about the same time) or extremely hard (eg when most of the time is spent in one single, non-repeating call to a library or built-in function). Save this percentage in a session variable:

$_SESSION["PERCENTAGE_DONE"] = $my_calculated_percentage;

Obviously, you want to update this variable as often as is possible and reasonable.

Now, create another php script which just prints out this value (plaintext would be enough for this example, but you could also use json or xml or some other format you like):

//initialize session, set headers etc. before this
echo $_SESSION["PERCENTAGE_DONE"]

For the javascript part, create another function that calls the new php script via ajax, reads the returned value and draws / updates the progress bar (for the drawing part you could take JustinJohns answer as a starting point). Now, after you execute the main $.ajax call, use this function with setTimeout to query the server repeatedly until the task is finished.

Answer 2

Please try following script for Ajax progress bar:

<script>
function submit_form_data(){
    $("#preview").html(''); 
    $("#preview").html('<img src="loader.gif" alt="Uploading...."/> <br><p>Please wait for response.............</p>'); 
    $.post('getdata.php',function(data){$("#preview").html(data)}) }
</script>

<div id='preview'></div>

Answer 3

The fundamental problem is that you do not know how long the request is going to take.

This will be suggestion rather than an answer.

I assumed time will be around 7-8 seconds always.

Make progress with loading 10 percentage on each second until 90 percentage attained.

After attaining wait for your ajax request to be completed and make bar width 100 percentage on success callback of ajax.

You can customize with time to load percentage of bar.

Please check this demo

Answer 4

The image you used should loading animation image.

<div id="loading" >
<p>
<img src="images/loading.gif">
Please Wait
</p>
</div>

Then in the script function use the following code

<script type='text/javascript'>
function showLoading() {
$("#loading").show();
}

function hideLoading() {
$("#loading").hide();
}

</script>

Then call the showLoading and hideLoading function whereever you need in the ajax call. It will shows and hides the animation.

Answer 5

As you have asked for a simple solution, This may help you.. Have a div with ID 'loading' with display as hidden.

<div id='loading' style='display:none;'><img src='loading.gif' /></div>

When the ajax request called, display the div

$('#loading').show();

When the response is success, again hide back the div,

$('#loading').hide();