从 xmlHttp.responseText 获取某些元素作为响应？答案

【问题标题】：Get certain element in response from xmlHttp.responseText?从 xmlHttp.responseText 获取某些元素作为响应？
【发布时间】：2012-09-13 12:23:59
【问题描述】：

根据此链接xmlhttp.responseText not display text。我有另一个关于定位 div id 以显示更新状态的问题。我有数百个 div id="result" 正在等待响应代码采取行动：成功 ||错误。现在的问题是当我更新任何字段时。只有第一个 div id="result" 是变化。那么如何从 php 中取回 id 并让它显示在自己的状态中呢？

<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>

现在的问题是：

如何根据"document.getElementById("resultXXX").innerHTML"中PHP的responseText改变"XXX"？
我想将 div 命名为 id="rate[$i]" 并更新，然后在更新成功后发回。

请提出建议。

【问题讨论】：

标签： javascript ajax html getelementbyid

【解决方案1】：

您的第一个问题是所有 div、inputs 和 trs 都具有相同的 id。 ID 只能在 html 页面上存在一次，因此您应该将它们重命名为更具描述性的名称。此外，id 不能以数字开头（f.e 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;
}

【讨论】：

我可以问一个转储问题吗？如果我能得到 JSON 格式的响应，然后呢。如何获取预期目标的状态更新？
这对我来说太难了。所以我决定只为所有更新设置一个状态：

【解决方案2】：

您所做的是违反 id 的含义，即元素的唯一标识符。当然，样式规则适用于具有特定 id 的所有元素，但您应该在 DOM 中保持 id 的唯一性。存在document.getElementById 而不是getElementsById（注意额外的's'）是有原因的。

只需使用其他东西来完成您的任务。准确地说，是类。所以，有像

这样的元素

<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\"/>";

【讨论】：

【解决方案3】：

首先，你可以使用jQuery Ajax 实现。这将使事情变得容易得多。其次，id 应该是唯一的，并且您有多个具有相同 id 的元素。

【讨论】：

【解决方案4】：

这对我来说太难了。所以我决定只为所有更新设置一个状态：

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

这将使所有更新状态浮动在内容之上。问题解决了！

【讨论】：