¿Cómo puede actualizar PHP una ProgressBar en código HTML?

Tengo un formulario en mi index.html que llama a una función jQuery al enviar. Esta función jQuery hace una solicitud AJAX para ejecutar un script PHP.

Quiero que el script PHP interactúe con el HTML (el objective es actualizar una barra de progreso).

Mi problema es que al ejecutar el script PHP con AJAX, se ejecuta en segundo plano. No quiero que la página se actualice durante el procesamiento de PHP, de hecho.

He hecho un dibujo. He hecho un dibujo.

Cómo puedo conseguir esto ?

Creo que quieres decir que la barra de progreso debe llenarse con un proceso de carga. Puedes hacerlo así

 $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); // Upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; $('#progress').text(percentComplete + '%').css('width', percentComplete + '%'); } }, false); // Download progress xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; $('#progress').text(percentComplete + '%').css('width', percentComplete + '%'); } }, false); return xhr; }, type: 'POST', url: "/", data: {}, success: function(data){ // Do something success-ish } });