Question

我有一些基本的Ajax代码，它调用名为remove_excess_images_new.php的PHP页面，如下所示。

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;
    });
}

这是read_images.php文件中的主要PHP：

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;

此请求非常有效，可以处理数千张图像。唯一的问题是当表行被附加到主页面中的表（remove_excess_images_new.php）时，链接在ajax请求完成之前不会处于活动状态。这个问题是用户可能希望在请求仍在进行时删除图像或其他内容。有办法解决这个问题吗？在请求完成之前，remove_excess_images_new.php上的所有链接都不起作用，我希望所有HTML在请求仍在进行时都能正常工作。

Answer 1

同步ajax可能是个问题。不要使用while循环（需要同步），将ajax放入函数中，并在done回调中调用它：

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;
    });
}

Answer 2

您需要在javascript中将async: false,更改为async: true

否则执行将在请求发生时停止：）

- 编辑

这不应该在while循环中完成！

Answer 3

异步调用在后台执行，而其他代码继续执行。如果进行同步调用，则所有代码执行都会等待，直到请求完成。通常，ajax请求是异步的，除非您指定它们应该运行同步。

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

3 个答案: