Question

我有代码从mysql中删除记录，通过php显示在表中，然后从页面中删除表格行。记录被删除，但页面或DOM没有任何变化，它应该立即改变。

以下是要从DOM中删除的javascript代码

function deleteItem(layer, url) {
    var xmlHttp=GetXmlHttpObject();
    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
                if(xmlHttp.responseText == 'result=true') {
                        var row = document.getElementById(layer);
                        row.parentNode.removeChild(row);
                }

        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
                document.getElementById(layer).innerHTML="loading";
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}
function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
        deleteItem(layer, url);
    }
}

这是从php调用的：

echo '<tr id=\"article_' . $pk . '\">' . "\n";   
echo '<td><a href="#" onclick="deleteRec(\'article_' . $pk .'\', \'' . $pk . '\')">DELETE</a></td>' . "\n";

$ pk是记录的主键。

结果html很好（很明显，因为删除了记录）

<a href="#" onclick="deleteRec('article_260343387801', '260343387801')">DELETE</a>

但页面没有以任何方式更新。

为什么？

Answer 1

我只是将您的代码放入测试页面，当我删除：

时，它对我有用

 document.getElementById(layer).innerHTML=xmlHttp.responseText;

就在行之前的行：

} else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {

document.getElementById(layer).innerHTML=xmlHttp.responseText;导致错误。

编辑：我只是补充一点，get_records.php的'版本'只是一个php页面，echos'result = true'用于我自己的测试目的，所以如果你仍然遇到问题那么我会建议你的PHP脚本，在删除正确的数据时，没有返回正确的字符串 - 您应该检查实际输出到xmlHttp.responseText的内容

编辑2：您的PHP代码实际上永远不会以您的responseText将识别的方式返回'result = true'。你有：

if($cmd=="deleterec") {
    mysql_query('DELETE FROM AUCTIONS WHERE ARTICLE_NO = ' . $pk);
}

因此您将删除正确的项目，但在任何地方都没有echo 'result=true';，因此您的if语句检查responseText永远不会被调用。

编辑3：我目前的测试代码（在firefox中运行良好[在其他浏览器中未经测试]）。

<script type="text/javascript">
    var xmlHttp;

    function GetXmlHttpObject(){
        var objXMLHttp = null;

        if (window.XMLHttpRequest){
        try{
            objXMLHttp = new XMLHttpRequest();
        }catch (e){
            objXMLHttp = false;
        }
    }else if (window.createRequest){
        try{
            objXMLHttp = new window.createRequest();
        }catch (e){
            objXMLHttp = false;
        }
    }else if (window.ActiveXObject){
        try {
            objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try {
                objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                objXMLHttp = false;
            }
        }
    }

    return objXMLHttp;
  }
 function deleteItem(layer, url) {
 var xmlHttp=GetXmlHttpObject();
 if(xmlHttp==null) {
    alert("Your browser is not supported?");
 }
 xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            console.log(xmlHttp.responseText);
            if(xmlHttp.responseText == 'result=true') {
                    var row = document.getElementById(layer);
                    row.parentNode.removeChild(row);
            }
            //document.getElementById(layer).innerHTML=xmlHttp.responseText;
    } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            //document.getElementById(layer).innerHTML="loading";
    }
 }
 xmlHttp.open("GET",url,true);
 xmlHttp.send(null);
 }
 function deleteRec(layer, pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    if (confirm("Confirm Delete?")) {
    deleteItem(layer, url);
    }
 }
</script>


<table>
      <tr id="article_260343387801">
      <td><a href="#" onclick="updateByPk()">Name</a></td>
      <td><a href="#" onclick="deleteRec('article_260343387801', '260343387801')">DELETE</a>
      </td>
      </tr>
 </table>

这与php代码结合使用（我的个人测试中注释了数据库连接/查询内容）。

Answer 2

我没有立即明白为什么：

row.parentNode.removeChild(row);

行不通......你确定你真的到了那里吗？您的错误报告存在问题：

document.getElementById(layer).innerHTML=xmlHttp.responseText;

'layer'是一个＆lt; tr＆gt;，你不能在＆lt; tr＆gt;上分配innerHTML。在IE中。相反，您将收到“未知运行时错误”异常，脚本将停止。

（另外，如果您尝试将文本直接放在＆lt; tr＆gt;而不包含＆lt; td＆gt;围绕它的内容中，会发生什么情况。）

元素未从DOM中删除

2 个答案: