用ajax删除mysql记录

Question

我想知道从实时数据库中删除记录并立即刷新页面的最佳方法.目前我正在使用ajax,使用以下javascript方法:

function deleterec(layer, pk) {
   url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
   update('Layer2', url);
}

如果php页面上有cmd = deleterec,则删除主键= pk.这样可以正常删除记录,但页面不会更新.

我的更新方法非常简单:

function update(layer, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }

       //etc
    }

    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

如何删除或更改记录,以及更新页面.

目前,我的ajax框架通过将数据传递给javascript更新方法来工作,该方法适用于选择要在不同层中显示的不同查询.

我想添加删除功能,或以某种方式更改记录.

我想知道是否可以单击链接执行查询然后调用我的更新方法和refesh tge页面.根据我的更新方法,有没有简单的方法可以做到这一点？

我想尽可能避免重写我的更新方法.

WOuld最简单的方法是在执行mysql查询后让php页面(仅在图层中)重新加载吗？

或者制作一个新的"alterstatus"方法,它会通过删除或观察作为参数,让php执行相应的查询,然后更新页面？

编辑:链接生成如此.deleterec将从生成的其他链接中调用.

{

$pk = $row['ARTICLE_NO'];

echo '<tr>' . "\n"; 

    echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['USERNAME'].'</a></td>' . "\n"; 

echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['shortDate'].'</a></td>' . "\n"; 

echo '<td><a href="#" onclick="updateByPk(\'Layer2\', \'' . $pk . '\')">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 


echo '<td><a href="#" onclick="deleteRec(\'Layer2\', \'' . $pk . '\')">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 

echo '</tr>' . "\n"; 

}

编辑:无法修改更新方法,因为需要图层的updateByPk和updateBypg方法使用它.

Answer 1

如果不仔细研究您的代码细节,我不知道如何在不进行往返(AJAX或页面导航)的情况下从服务器端DB更新/删除.但是我建议使用JavaScript框架(比如jQuery或其他东西)来处理AJAX和DOM操作.从理论上讲,这应该可以减轻瘦客户端端的任何跨浏览器故障排除.

Answer 2

当你说"立即更新"时,我认为你的意思是通过Javascript更新文档.Ajax和页面刷新不会在一起.

您是如何显示现有数据行的？比如说你是这样列出来的:

<div id="row1">row 1</div>
<div id="row2">row 2</div>

其中row1和row2是数据库中分别带有主键1和2的行.使用简单的javascript函数从DOM中删除关联的div:

function deleterec(pk) {
    url = "get_records.php?cmd=deleterec&pk="+pk+"&sid="+Math.random();
    update(pk, url);
}

function update(pk, url) {
    var xmlHttp=GetXmlHttpObject(); //you have this defined elsewhere

    if(xmlHttp==null) {
        alert("Your browser is not supported?");
    }

    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
            document.getElementById(layer).innerHTML=xmlHttp.responseText;
            removeDomRow(pk); //You may wish to check the response here
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }
    }
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}

以下函数来操作DOM:

function removeDomRow(pk){
        var row = document.getElementById('row' + pk);
        row.parentNode.removeChild(row);
}

如果您正在使用表格:

<tr id="row1">
    <td>row 1</td>
</tr>
<tr id="row2">
    <td>row 2</td>
</tr>

你可以使用:

 function removeDomRow( id ) { // delete table row
    var tr = document.getElementById( 'row' + id );
    if ( tr ) {
      if ( tr.nodeName == 'TR' ) {
        var tbl = tr; // Look up the hierarchy for TABLE
        while ( tbl != document && tbl.nodeName != 'TABLE' ) {
          tbl = tbl.parentNode;
        }
        if ( tbl && tbl.nodeName == 'TABLE' ) {
          while ( tr.hasChildNodes() ) {
            tr.removeChild( tr.lastChild );
          }
          tr.parentNode.removeChild( tr );
        }
      }
    }

关于thecocoonbear的观点,如果你要使用像Qjuery这样的框架,事情会容易得多:

$('#row'+id).remove();