Question

我正在尝试将get API请求发送到远程服务器。响应是完全可以的，正如我希望的那样。我正在尝试将响应存储在表中。但是这里的问题是processRequest()函数被调用两次，这会产生重复结果。我正在使用的警报也会显示两次。

document.getElementById("ndviHsearch").onclick = function getndviHdata(){
   var ndvihconvdataTime=[];
   var ndvihStd=[];
   var ndvihp25=[];
   var ndvihmin=[];
   var ndvihmax=[];
   var ndvihmedian=[];
   var ndvihmean=[];
   var ndvihp75=[];
   var ndviHfidValue = document.getElementById("ndviHfid").value;
   var ndviHstartDateValue = document.getElementById("ndviHstartDate").value;
   var ndviHendDateValue = document.getElementById("ndviHendDate").value;
   table = document.getElementById("ndviHtable");

   const xhr = new XMLHttpRequest();
   ndviHstartDateValue = new Date(ndviHstartDateValue).getTime() / 1000;
   ndviHendDateValue = new Date(ndviHendDateValue).getTime() / 1000;
   xhr.open("GET","https://api.agromonitoring.com/agro/1.0/ndvi/history?polyid="+ndviHfidValue+"&start="+ndviHstartDateValue+"&end="+ndviHendDateValue+"&appid=APIKEY");
   xhr.setRequestHeader("Content-Type","application/json");
   xhr.send();
   xhr.onreadystatechange = processRequest;
   function processRequest(e) {
     if (xhr.status==200){
       response = JSON.parse(xhr.responseText);
       alert (response.length);
       for (var i=0; i<response.length; i++){
         var dt = response[i].dt;

         // Unixtimestamp
         var unixtimestamp = dt;

         // Months array
         var months_arr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

         // Convert timestamp to milliseconds
         var date = new Date(unixtimestamp*1000);
   
         var year = date.getFullYear();
         var month = months_arr[date.getMonth()];
         var day = date.getDate();
         var hours = date.getHours();
         var minutes = "0" + date.getMinutes();
         var seconds = "0" + date.getSeconds();
   
         // Display date time in MM-dd-yyyy h:m:s format
         ndvihconvdataTime[i] = month+'-'+day+'-'+year+' '+hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
         ndvihStd[i]= response[i].data.std;
         ndvihp25[i] = response[i].data.p25;
         ndvihmin[i] = response[i].data.min;
         ndvihmax[i] = response[i].data.max;
         ndvihmedian[i]= response[i].data.median;
         ndvihmean[i] = response[i].data.mean;
         ndvihp75[i] = response[i].data.p75;
      }

    }
    else{
      alert("Invalid Credentials");
    }
    if (response.length>0){
      for(var i = 0; i < (response.length); i++)
      {
        alert (response);
        // create a new row
        var newRow = table.insertRow(table.length);
        for(var j = 0; j < 1; j++)
        {  
          var cell8 = newRow.insertCell(j);
          cell8.innerHTML = ndvihp75[i];  

          var cell7 = newRow.insertCell(j);
          cell7.innerHTML = ndvihmean[i];

          var cell6 = newRow.insertCell(j);
          cell6.innerHTML = ndvihmedian[i];

          var cell5 = newRow.insertCell(j);
          cell5.innerHTML = ndvihmax[i];

          var cell4 = newRow.insertCell(j);
          cell4.innerHTML = ndvihmin[i];

          var cell3 = newRow.insertCell(j);
          cell3.innerHTML = ndvihp25[i];

          var cell2 = newRow.insertCell(j);
          cell2.innerHTML = ndvihStd[i];

          var cell1 = newRow.insertCell(j);
          cell1.innerHTML = ndvihconvdataTime[i];

        }
      }
    }
  }
}

Answer 1

您还需要检查readyState值(xhr.readyState == 4 && xhr.status == 200)

功能xhr.onreadystatechange = processRequest;将在每次xhr状态更改时执行，您需要检查readyState == 4和status == 200是否同时执行操作。

API函数被调用两次导致重复

1 个答案: