Question

我正在尝试删除删除（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');
}

Answer 1

通过使用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引用<tr>上方的<a>。

希望有所帮助。

Answer 2

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

我建议您在从服务器获得成功响应时刷新显示数据的区域或区域

Answer 3

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

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

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

目前你正在编写对某些html元素的innerHTML的响应，这可能不会产生任何结果。

我认真地推荐jQuery进行dom操作和作为ajax库。

编辑：

注意到上面提到“购物车模板”的评论。您需要使用responseText更新包含购物车的元素的innerHTML。

Answer 4

实现此目的的一种快速而肮脏的方法是刷新成功的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;
        }

Answer 5

我喜欢使用：

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

删除DOM元素。或者，如果要保留元素，但要使其为子元素和文本删除，请使用：

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

希望有帮助...

在ajax数据中从数据库中删除，但在刷新时从屏幕上消失

5 个答案: