從xmlHttp.responseText獲取響應中的某個元素？

根據此鏈接xmlhttp.responseText not display text。我有另一個問題，關於找到div ID來顯示更新狀態。我有數百個div id =「result」，它正在等待響應代碼採取行動：成功||錯誤。現在的問題是當我更新任何領域時。這只是第一個div id =「結果」是變化。那麼如何從php獲取id並使其顯示在自己的狀態？從xmlHttp.responseText獲取響應中的某個元素？

<script type="text/javascript"> 

//auto update 
function updateField(nameValue){ 
    var xmlHttp=null; 
    try{ 
     xmlHttp=new XMLHttpRequest(); 
     } 
catch (e){ 
    try{ 
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
catch (e){ 
    alert("No AJAX!"); 
    return false; 
    } 
} 
xmlHttp.onreadystatechange=function(){ 
    if(xmlHttp.readyState==4){ 
     if (xmlHttp.status==200){ 
      //this will be called after update 
      var responseText = xmlHttp.responseText;   
       doSomethingAfterUpdate(responseText); 
      } 
     } 
    } 
    //this will send the data to server to be updated 
    xmlHttp.open("GET", 'inc/room_rate_updatez.php?'+ nameValue, true);//return "x" or "y" 
    xmlHttp.send(null); 
} 

function doSomethingAfterUpdate(retValFromPHP){ 
    if (retValFromPHP == "x"){ 
     document.getElementById("result").innerHTML = "<img src=\"../images/ico_no.png\" alt=\"X\"/>"; 
     document.getElementById("result").className="error" 
    }else{ 
     document.getElementById("result").innerHTML = "<img src=\"../images/ico_yes.png\" alt=\"Y\" />"; 
     document.getElementById("result").className="success" 
    } 
} 


</script>

這裏的HTML：

<table border="1"> 
<tr id="zebra"> 
<td>01 Nov 2012</td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|0" id="498" value="6400" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|1" id="498" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|2" id="498" value="4600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|3" id="498" value="5600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|4" id="498" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
</tr> 
<tr id="zebra"> 
<td>02 Nov 2012</td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|0" id="499" value="6200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|1" id="499" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|2" id="499" value="4600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|3" id="499" value="5600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|499|6200-5200-4600-5600-4100|4" id="499" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
</tr> 
<tr id="zebra"> 
<td>03 Nov 2012</td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|0" id="500" value="6200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|1" id="500" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|2" id="500" value="4500" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|3" id="500" value="5600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|500|6200-5200-4500-5600-4100|4" id="500" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
</tr> 
<tr id="zebra"> 
<td>04 Nov 2012</td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|0" id="501" value="6200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|1" id="501" value="5200" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|2" id="501" value="4600" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|3" id="501" value="5400" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
<td id="rate"><div id="result"></div>&nbsp;<input type="text" name="rate|501|6200-5200-4600-5400-4100|4" id="501" value="4100" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
</tr> 
</table>

現在的問題是：

如何使「XXX」根據從的responseText在PHP 「的document.getElementById（」 resultXXX變化「）.innerHTML」？
我想命名div id =「rate [$ i]」並更新，然後在更新成功時發回。

請建議。

來源

2012-09-13 Wilf

你的第一個問題是所有的divs，input和trs都有相同的id。一個ID只能在HTML頁面上存在一次，所以您應該將它們重命名爲更具描述性的內容。此外，ID的不能以數字開頭（FE ID =「498」，在下面的例子中）

<tr id="zebra1"> 
<td>01 Nov 2012</td> 
<td id="rate_20121101_498"><div id="result_20121101_498"></div>&nbsp;<input type="text" name="rate|498|6400-5200-4600-5600-4100|0" id="input_20121101_498" value="6400" size="10" onchange="updateField(this.name + '=' + this.value);"/></td> 
.... and so forth

要知道哪個值應被更新，可以使PHP返回一個JSON響應，是這樣的：

[ 
{ "id" : "20121101_498", "status" : "error" }, 
{ "id" : "20121101_500", "status" : "success" } 
]

然後您可以在doSomethingAfterUpdate函數中訪問它。

function doSomethingAfterUpdate(JSON){ 
    // Loop through the json response 
    for (var i = 0 ; i < JSON.length ; i++) 
    { 
    // Set the class name for each object in the json response 
    document.getElementById('result_' + JSON[i].id).className = JSON[i].status; 
    // If you want to you can also access the input from here using 
    // document.getElementById('input_' + JSON[i].id) 
    } 
}

你也可以直接把圖像中的CSS類：

.error 
{ 
    background:url('/images/ico_no.png') no-repeat; 
    width:20px; 
    height:20px; 
}

來源

2012-09-13 12:36:37 Jan

我可以有一個轉儲問題嗎？如果我可以在JSON中獲得響應，然後執行什麼操作。我如何才能獲得預期目標的狀態更新？ – Wilf

這對我來說太難了。所以我決定只對所有更新做出以下一個狀態： – Wilf

查看我的更新回答:) – Jan

你正在做的是違背id的含義，即元素的唯一標識符。當然，樣式規則適用於具有特定ID的所有元素，但是您應該將您的ID在您的DOM中保持唯一。有document.getElementById而不是getElementsById（注意額外的'）的原因。

只需使用別的東西來完成您的任務。類，準確地說。因此，具有類似於

<div class="result"></div> 
... 
<span class="result"></span> 
...

元素，你可以做所有的

var outputs = document.getElementsByClassName("result"); 
for (var i = 0; i < outputs.length; i++) 
    outputs[i].innerHTML = "<img src=\"../images/ico_no.png\" alt=\"X\"/>";

來源

2012-09-13 12:31:40 MaxArt

首先，你可以使用jQuery Ajax實現。這會讓事情變得更容易。其次，id應該是唯一的，並且您有多個具有相同ID的元素。

來源

2012-09-13 12:34:28

這是太難受。所以我決定做只有一個狀態的所有更新：

function doSomethingAfterUpdate(retValFromPHP){ 
    if (retValFromPHP == "x"){ 
     $("#result").fadeIn(1000); 
     document.getElementById("result").innerHTML = "<img src=\"../images/ico_no.png\" alt=\"X\"/> Error"; 
     document.getElementById("result").className="error" 
     $("#result").fadeIn(1000); 
    }else{ 
     $("#result").fadeIn(100); 
     document.getElementById("result").innerHTML = "<img src=\"../images/ico_yes.png\" alt=\"Y\" /> Succeed"; 
     document.getElementById("result").className="success" 
     $("#result").fadeOut(1000); 
    } 
}

這將使所有更新狀態浮在內容。問題解決了！

來源

2012-09-13 14:44:05 Wilf

從xmlHttp.responseText獲取響應中的某個元素？

回答

相關問題