IT虾米网

php之元素未从 DOM 中删除

qq123 2024年02月03日 程序员 254 0

我有代码从 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> 

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

为什么?

请您参考如下方法:

我刚刚将您的代码放入测试页面,当我删除以下内容时它对我有用:

 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 代码结合使用效果很好(数据库连接/查询内容被注释掉以供我个人测试)。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!