使用jQuery.post()提交内容并显示正在发生的事情

This is more of curiosity that anything, but I can think of several places (mainly in admin sections) where this could be useful. I know the title is confusing so this is what I mean:

Say you have a form that posts to example_cb.php. example_cb.php is a very large callback page that generates multiple thumbnails of an image, puts them in their respective directories, adds them to a database, etc. You already have the form posting by jquery with a function like this

$.post('example_cb.php', $(this).serialize(), function(data) {
   // Success
}, 'json');

Before posting it updates a div to say "processing" of something. Then after it successfully completes the div fades out. However you want the div to show what is happening on the server side. i.e. Converting 200X200 thumb > Converting 350x350 thumb > Adding Records to Database > etc.

How can you accomplish this?

I know it's a loaded question, but I'm confident there are people on here smart enough to figure it out. If you need more info please comment :)

You could do something like -

  • Write each 'event' update to a database table
  • Write a page that retrieves the last n events from table
  • Use something like 'load' to call page update an onscreen div with the updated progress.
  • Use 'setTimeout` to keep updating.

This could be accomplished most easily with using the push method, but I'm not too familiar with ajax push or comet technology, so I'll give you a pull solution.

Basically you need to create the initial ajax request to start the processing. Then, you need to have another request running in a tight loop that checks against a php page for the current status. For example, on the php page doing the processing, you can update a _SESSION key that stores the current processing information (like "Converting 200X200 thumb") at each step. Another php page will exist purely to print that information and you can retrieve it with the JS running in a loop.

pusher like services may be used for bi-directional communication.

I'm putting it down for reference, though this would be overkill for such a simple scenerio.