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页面是否可行。根据我的更新方法，有没有简单的方法呢？

如果可能的话，我想避免重写我的更新方法。

最简单的方法是在执行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和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 );
        }
      }
    }

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

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

Answer 3

我想知道点击链接执行查询然后调用我的更新方法和refesh tge页面是否可行。根据我的更新方法，有没有简单的方法呢？

那么，你为什么不提交表格？

Answer 4

您有两种选择：

进行完整的往返，即在您知道项目已成功删除之前不要更新用户界面，或者
欺骗您的用户

如果操作结果有问题且重要，请使用第一个选项。如果您对结果有信心，并且人们不需要知道细节，请使用第二个。

真的，没有任何东西可以让人们成功地被人欺骗。

Answer 5

我不会使用HTTP GET方法从数据库中删除记录，我会使用POST。我不会使用Ajax，因为您正在寻找的交互显然是同步：删除然后更新。我会使用常规提交（JS或HTML）。

那就是说，如果你真的致力于使用XHR，那么唯一剩下的解决方案就是根据Renzo Kooi建议的服务器响应进行回调。

Answer 6

您可以创建一个回调，在客户端负责更新屏幕。您可以在XHR功能中执行此操作。

    function update(layer, url) {
        var xmlHttp=GetXmlHttpObject(),
             callbackFn = function(){ 
                  /* ... do thinks to reflect the update on the user screen,
                         e.g. remove a row from a table ...*/
                 };

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

        xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
                /* if the server returns no errors run callback 
                   (so server should send something like 'ok' on successfull
                   deletion 
                */
                if (xmlHttp.responseText === 'ok') {
                      callback();
                }
        //=>[...rest of code omitted]

Answer 7

删除和更新DOM：

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

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

function update(rowId, 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;
            deleteRow(rowId); //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);
}


function deleteRow(i){
    document.getElementById('myTable').deleteRow(i)
}

Answer 8

我发现有三个基本操作可以通过基于Ajax的管理页面执行，更新，删除和追加。这些操作中的每一个都以固有的不同方式改变DOM。

你已经编写了一个可以更新 DOM中现有div的函数，但是如果你想删除 div中的div，这个函数将无法正常工作DOM就像你在这个问题中所做的那样，当你决定使用Ajax添加新记录时，它也不会很好用。

为了正确处理这个问题，首先需要为输出的每一行分配一个唯一的id：

$pk = $row['ARTICLE_NO'];

echo '<tr id=\"article_' . $pk . '\">' . "\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(\'article_' . $pk .'\', )">'.$row['ARTICLE_NAME'].'</a></td>' . "\n"; 

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

然后你需要创建一个可以删除表格行的删除功能：

function delete(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") {
            if(xmlHttp.responseText == 'result=true') {
                // Here you remove the appropriate element from the DOM rather than trying to update something within the DOM
                var row = document.getElementById(layer);
                row.parentNode.removeChild(row);
            }
        } else if (xmlHttp.readyState==1 || xmlHttp.readyState=="loading") {
            document.getElementById(layer).innerHTML="loading";
        }

       //etc
    }

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

然后最后调整你的deleterec函数：

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

作为最后一点，我必须回应其他建议使用框架的观点。任何框架的使用，如jQuery，Prototype，Dojo或其他，都将具有短期和长期的好处。另外，我绝对不会使用GET来执行这种性质的操作。强制删除元素所需要做的就是点击相应的URL并传入相关的文章编号。

Answer 9

我会投票推荐其他推荐jQuery的答案之一，但我还没有足够的分数。

我认为实现您正在寻找的“更新”的最简单方法是让您的AJAX删除返回相关的删除后HTML，或者您可以使用jQuery来启动删除然后删除tr，来自页面的div等。

jQuery.post("get_records.php ", { cmd: "delete", pk: 123 }, function() {
    jQuery("tr.row123").remove(); 
})

用ajax删除mysql记录

9 个答案: