如何從Ajax函數中更改變量？

-1

案例：所以我從後端接收JSON數據，我想在表中顯示該數據。我創建了一個名爲的表格字符串，並通過JSON迭代時，我將響應連接到tableOutputString。最後，我使用innerHTML來顯示錶格。如何從Ajax函數中更改變量？

注意：請看「Starts here」和「End here」之間的代碼。

問題：函數裏面嵌套了AJAX。在內部AJAX中，我試圖連接tableOutputString但它沒有發生。我認爲有一些範圍問題。當我處於AJAX範圍內時，我可以看到tableOutputString已更新，但是一旦我從外部AJAX中走出來，我的字符串變得與我在輸入AJAX之前的字符串相同。請幫助我。

function displaytable(response) { 

    // Variable to check the length of the JSON abject 
    var lengthOfJSON = Object.keys(response).length; 
    var tableOutputString = ""; 
    var Exam_id = ""; 

    // creating the body part of the table 
    tableOutputString = tableOutputString + '<tbody>'; 
    for (var i = 0; i < lengthOfJSON; i++) { 
     tableOutputString = tableOutputString + '<td>' + (i + 1) + '</td>'; 

     for (var key in response[i]) { 
      if (key == "exam_name") { 
       Exam_id = response[i]["exam_id"]; 
       tableOutputString = tableOutputString + '<td>' + '<a href="#"' + "onclick=getExam(" + Exam_id + ")>" + response[i][key] + '</a>' + '</td>'; 
      } else { 
       tableOutputString = tableOutputString + '<td>' + response[i][key] + '</td>'; 
      } 
     } 


     /* Starts Here */ 

     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       var response = JSON.parse(this.responseText); 

       if (response["taken"] == "true") { 
        var xhttp = new XMLHttpRequest(); 
        xhttp.onreadystatechange = function() { 
         if (this.readyState == 4 && this.status == 200) { 
          var response = JSON.parse(this.responseText); 
          if (response["graded"] == "true") { 
           tableOutputString = tableOutputString + '<td>' + "graded" + '</td>'; // trying to concatenate 
          } 
          else { 
           tableOutputString = tableOutputString + '<td>' + "Not graded" + '</td>'; // trying to concatenate 
          } 
         } 
        }; 
        xhttp.open("POST", "getWasUserExamGraded.php?id=" + Exam_id, true); 
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
        xhttp.send(); 
       } 
       else { 
        tableOutputString = tableOutputString + '<td>' + "Not taken" + '</td>'; // trying to concatenate 
       } 
      } 
     }; 
     /* Ends Here */ 


     xhttp.open("POST", "getDidTakeExam.php?id=" + Exam_id, true); 
     xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
     xhttp.send(); 
     tableOutputString = tableOutputString + '</tbody>'; //tableOutputString is not updated inside AJAX 

     document.getElementById("responstable").innerHTML = tableOutputString; 
    } 
}

來源

2017-10-19 Rohan Mavani

你沒有創造任何''元素更新表格。 ''應該在''標籤內。 ''是一個行容器，每個''代表該行的一個單元 – mhodges

謝謝@mhodges。這對我來說不是問題。範圍是一個問題。無論我在AJAX內更新什麼都沒有更新。現在，除了一列以外，我的桌子是完整的，這是因爲這一點。不過，謝謝你的回覆。 –

可能的重複[如何從異步調用返回響應？]（https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call） – CBroe

我認爲這個問題是當你更新表的時候，你有沒有試過裏面的onreadystatechange

var cellText; 
if (response["graded"] == "true") { 
    cellText = '<td id="gradedCell">' + "graded" + '</td>'; 
} else { 
    cellText = '<td id="gradedCell">' + "Not graded" + '</td>'; 
} 
document.getElementById("gradedCell").innerHTML = cellText ;

來源

2017-10-19 23:16:24

這是一個好的開始，但所有OP的代碼都在一個很大的'for'循環中，這意味着ajax調用將會被多次命中，每次覆蓋innerHTML。 –

如何從Ajax函數中更改變量？

回答

相關問題