在ajax中，数据从数据库中删除，但在刷新时从屏幕上消失 - in ajax data is deleted from database but disappear from screen when refreshed

in ajax data is deleted from database but disappear from screen when refreshed

我试图删除对删除(Ajax)选项的数据。当我点击删除按钮，它删除数据从数据库和页面应自动消失的数据。但它没有发生，它删除了数据但没有从屏幕上消失。当我刷新页面，然后在页面中的数据消失......请帮帮我

html代码…

<table><tr><td><a href="javascript:remove()">Remove</a></td>
                 <td id="resId"></td></tr></table>

ajax函数是....

function remove(){
       var http = GetXmlHttpObject();
        http.onreadystatechange = function()
        {
            if(http.readyState==4)
            {
                document.getElementById("resId").innerHTML = http.responseText;
                //alert(http.responseText);
            }
        }
        var name1 = document.getElementById("bn").innerHTML;
        //alert(name);
        var url = "index.php?menu=remove_cart&ajax=ajax&q="+name1;
        http.open('POST',url,true);
        http.send(null);
    }

PHP函数是....

function remove_cart($name1){
    global $template;
    $sql = "DELETE FROM tbl_buy WHERE b_name = '$name1'";
        $this->db->executeQuery($sql);
      $template->main_content = $template->fetch(TEMPLATE_DIR . 'my_cart.htm');
}

通过使用AJAX修改数据库，您已经禁用了浏览器的默认刷新机制:页面重新加载。因此，您必须使用JavaScript提供自己的页面刷新机制。你需要在你的PHP中添加一些自定义的成功消息，告诉你的JS一切正常。

if(http.readyState==4)
{
    document.getElementById("resId").innerHTML = http.responseText;
    //alert(http.responseText);
    if (http.status==200){ //on successful server response
        //check responsetext for successful DB delete
        if ('successful DB delete'){ //pseudo-code condition
            //javascript to remove element representing the DB row from the HTML DOM
            //ie. element.parentNode.removeChild(element);
        }
    }
}

让'element' JS变量表示被点击的元素，修改你的remove()函数和它的调用方式:

function remove(element){
    //...
}

和

<table><tr><td><a href="javascript:remove(this.parentNode.parentNode)">Remove</a></td>
                 <td id="resId"></td></tr></table>

其中this.parentNode.parentNode引用<a>之上的<tr>。

希望对你有帮助。

当您使用ajax调用删除数据时，必须从服务器端获得成功/失败响应。

我建议您在从服务器

获得成功响应时刷新显示数据的或区域。

在回调中，您有以下代码:

document.getElementById("resId").innerHTML = http.responseText;

写一些从dom中删除条目的功能。

现在你只是在写一些html元素的innerHTML的响应，这可能会导致什么。

我强烈推荐使用jQuery进行dom操作，并将其作为ajax库。

编辑:

注意到上面提到"购物车模板"的注释。您需要更新包含购物车的元素的innerHTML，使用responseText.

我喜欢使用:

http://api.jquery.com/remove/

删除DOM元素。或者，如果你想保留该元素，但删除它的子元素和文本，使用:

http://api.jquery.com/empty/

实现此目的的一种快速而简单的方法是在ajax调用成功时刷新页面，如下所示:

  if(http.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("resId").innerHTML = http.responseText;
            //alert(http.responseText);
            //refresh page 
            window.location.href=window.location.href;
        }