Arrays ajax中的循环数组_Arrays_Ajax_Loops

Arrays ajax中的循环数组

arrays ajax loops

Arrays ajax中的循环数组,arrays,ajax,loops,Arrays,Ajax,Loops,为了预加载我的网站，我尝试在Ajax中循环一个数组，以查看我的3幅图像的加载百分比，但没有显示百分比，页面上只显示此文本这是一个编码问题吗？我使用了这个JSFIDLE: 这是我的测试页面，有1个jpg:%ok 这是我的测试页面，有3个jpg:%not ok 我是初学者。你知道为什么会这样吗？谢谢你的帮助 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type"

为了预加载我的网站，我尝试在Ajax中循环一个数组，以查看我的3幅图像的加载百分比，但没有显示百分比，页面上只显示此文本

这是一个编码问题吗？我使用了这个JSFIDLE:

这是我的测试页面，有1个jpg:%ok

这是我的测试页面，有3个jpg:%not ok

我是初学者。你知道为什么会这样吗？谢谢你的帮助

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>ajax percentage</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>

 
  
</head>
<body>
    <div id="progressCounter"></div>
<br>
<div id="loading">Loading</div>
<br>
<div id="data"></div>

    <script type="text/javascript">//<![CDATA[
array = ['gogol','labiche','courteline'];

for(var i=0;i<array.length;i++){
//var id = array[i];
//console.log(id + array[i]);
var progressElem = $('#progressCounter');
var URL = "http://piecesdetheatre.free.fr/img/" + array[i] + ".jpg";
$("#loading").hide();
$("#progressCounter").append(URL);


$.ajax({
    type: 'GET',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);//affiche le code source
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
               document.getElementById("progressCounter").innerHTML =
            this.responseText;
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
        $('#loading').show();
    },
    complete: function () {
        $("#loading").hide();
    },
    success: function (json) {
        $("#data").html("data receieved");
    }
});
}

  //]]></script>

  

    

</body>
</html>


ajax百分比


加载


//

您必须使用

append

for(var i=0;i<array.length;i++){//var id = array[i];
//console.log(id + array[i]);
var URL = "<p>http://piecesdetheatre.free.fr/img/" + array[i] + ".jpg</p>"; $("#loading").hide();
$("#progressCounter").append(URL);

for（var i=0；i您必须使用append

for(var i=0;i<array.length;i++){//var id = array[i];
//console.log(id + array[i]);
var URL = "<p>http://piecesdetheatre.free.fr/img/" + array[i] + ".jpg</p>"; $("#loading").hide();
$("#progressCounter").append(URL);

for（var i=0；i我也尝试过这个代码。它正确吗
var idArray = ['gogol.jpg' , 'ionesco.jpg' , 'williams.jpg'];
for(var i = 0;i < idArray.length;i++) {
    (function(i) {
        var xhr = new XMLHttpRequest(); // ***
        xhr.open('GET', 'http://piecesdetheatre.free.fr/img/' + idArray[i]);
        //xhr.setRequestHeader('Authorization', authorizationToken);
        xhr.send(null);
        console.log(xhr.readyState);
        xhr.onprogress = function (event) {
        console.log('LOADING', xhr.readyState); // readyState will be 3
        console.log( Math.round(event.loaded / event.total * 100) +"%");
};
     
    })(i);
}

var idArray=['gogol.jpg'，'ionesco.jpg'，'williams.jpg']；
对于（变量i=0；i
我也尝试过这个代码。它正确吗
var idArray = ['gogol.jpg' , 'ionesco.jpg' , 'williams.jpg'];
for(var i = 0;i < idArray.length;i++) {
    (function(i) {
        var xhr = new XMLHttpRequest(); // ***
        xhr.open('GET', 'http://piecesdetheatre.free.fr/img/' + idArray[i]);
        //xhr.setRequestHeader('Authorization', authorizationToken);
        xhr.send(null);
        console.log(xhr.readyState);
        xhr.onprogress = function (event) {
        console.log('LOADING', xhr.readyState); // readyState will be 3
        console.log( Math.round(event.loaded / event.total * 100) +"%");
};
     
    })(i);
}

var idArray=['gogol.jpg'，'ionesco.jpg'，'williams.jpg']；
对于（变量i=0；i

几点提示（可能无法完全回答您的问题）
您的ajax响应是一个图像。因此，如果其JSON jQuery将尝试解析JSON响应，则数据类型不应为JSON。在您的情况下，它不是JSON，因此将抛出错误
请尝试数据类型：“text”
，或删除该键值对
document.getElementById（“progressCounter”）.innerHTML=
这个.responseText
您试图向html元素提供图像数据。这就是您在图像中看到的
试试这个
document.getElementById("progressCounter").innerHTML = evt.total

几点提示（可能无法完全回答您的问题）
您的ajax响应是一个图像。因此，如果其JSON jQuery将尝试解析JSON响应，则数据类型不应为JSON。在您的情况下，它不是JSON，因此将抛出错误
请尝试数据类型：“text”
，或删除该键值对
document.getElementById（“progressCounter”）.innerHTML=
这个.responseText
您试图向html元素提供图像数据。这就是您在图像中看到的
试试这个
document.getElementById("progressCounter").innerHTML = evt.total

你现在可以检查吗？没有百分比，看一看你在var URL中没有忘记的结果吗？你现在可以检查吗？没有百分比，看一看你在var URL中没有忘记的结果吗？非常感谢，这有助于我获得百分比。如果我写console.log（evt.total）；我得到了几十个不同的值。为什么？我应该只得到我所有图像的总重量？@user14387116这是因为您正在加载多个图像，并且每个图像的进度都不同。您在同一个分区中显示多个图像的进度，因此进度百分比将不断变化，直到所有图像的进度都达到100%A d详细说明：当我运行test.html或test2.html时，在半秒钟内我看到了ulrl的图像，是否可以显示0%？@user14387116这是因为这行$（“#progressCounter”）.append（URL）；
remove并检查非常感谢，它可以帮助我获得百分比。如果我编写console.log（evt.total）；我得到了几十个不同的值。为什么？我应该只得到我所有图像的总重量？@user14387116这是因为您正在加载多个图像，并且每个图像的进度都不同。您在同一个分区中显示多个图像的进度，因此进度百分比将不断变化，直到所有图像的进度都达到100%A d详细说明：当我运行test.html或test2.html时，在半秒钟内我看到ulrl的图像，是否可以显示0%？@user14387116这是因为这一行$（“#progressCounter”）。追加（URL）；
删除并检查