php - 元素未从 DOM 中删除

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 页面，为了我自己的测试目的，回显“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 代码结合使用效果很好(数据库连接/查询内容被注释掉以供我个人测试)。