如何在Ajax请求期间正确加载HTML

I have some basic Ajax code which is calling a PHP page called remove_excess_images_new.php as shown below.

var done = false,
    offset = 0,
    limit = 20,
    my_num = 0;

while (!done) {
    var url = "read_images.php?offset=" + offset + "&limit=" + limit + "&my_num=" + my_num;

    $.ajax({
        async: false,
        url: url
    }).done(function(response) {

        if (response.processed !== limit) {
            // asked to process 20, only processed <=19 - there aren't any more
            done = true;
        }
        my_num = response.my_num
        offset += response.processed;
        if(response.table_data != '') {
            $('#myTable > tbody:last').append(response.table_data);
        }
        $("#mybox").html("<span class=\"color_blue\">Processed a total of " + offset + " images.</span>");
        console.log(response)
    }).fail(function(jqXHR, textStatus) {

        $("#mybox").html("Error after processing " + offset + " images. Error: " + textStatus);

        done = true;
    });
}

Here is the main PHP inside the read_images.php file:

require_once('includes/db_connect.php');
$stuff = scandir('../images/original');

$image_table = '';
$offset = $_GET['offset'];
$limit = $_GET['limit'];
$my_num = $_GET['my_num'];
$images = array();

if($offset == 0) {
    array_shift($stuff);
    array_shift($stuff);
}

$server_images = array_slice($stuff, $offset, $limit);

...

//The variable $image_table consists of multiple rows which are appended onto the HTML table above, the amount of rows in this variable are determined by how many images are found which do not exist in the database, but do exist in ftp.
$response = array (
    'processed' => count($server_images),
    'table_data' => $image_table,
    'my_num' => $my_num,
);
header('Content-Type: application/json');
echo json_encode($response);
die;

This request works very nicely and it can process thousands of images. The only problem is as the table rows get appended on to the table within the main page(remove_excess_images_new.php), the links are not active until the ajax requests have finished. The problem with this is that the user may want to delete an image or something while the request is still going. Is there a way to get around this? None of the links on remove_excess_images_new.php work until the requests are finished, I would like all the HTML to work while the requests are still in process.

synchronous ajax is probably the issue. Instead of using a while loop (which requires synchronicity), place your ajax into a function, and call it in the done callback:

var done = false,
    offset = 0,
    limit = 20,
    my_num = 0;

function imagething(){

if(!done) {
    var url = "read_images.php?offset=" + offset + "&limit=" + limit + "&my_num=" + my_num;

    $.ajax({
        //async: false, defaults to async
        url: url
    }).done(function(response) {

        if (response.processed !== limit) {
            // asked to process 20, only processed <=19 - there aren't any more
            done = true;
        }
        my_num = response.my_num
        offset += response.processed;
        if(response.table_data != '') {
            $('#myTable > tbody:last').append(response.table_data);
        }
        $("#mybox").html("<span class=\"color_blue\">Processed a total of " + offset + " images.</span>");
        console.log(response);
        imagething(); //<--------------------------recursive call
    }).fail(function(jqXHR, textStatus) {

        $("#mybox").html("Error after processing " + offset + " images. Error: " + textStatus);

        done = true;
    });
}

You need to change async: false, to async: true in your javascript

Otherwise execution will be stopped whilst the request happens :)

-- EDIT

This should not be done in a while loop!

An asynchronous call gets performed in the background while the other code execution continues. If you make an synchrounous call all code execution waits till the request finishes. Normally ajax requests are asynchronous, unless you specify they should run synchronous.