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