Question

我正在使用.load更新我的列表，但这不是正确的方法，因为它每次都会嵌套。什么是候补。我是Ajax的新手。

    $(document).on('click','#npDelete',function(){
            var dataId = $(this).data("id");

            alert(dataId);
            $.ajax({
                type:'get',
                url:"{!! URL::to('deleteproject') !!}",
                data:{'id':dataId

,},

            success:function(data){
                console.log('success');
                console.log(data);
                console.log(data.length);
                $("#projects1").load("projects");
            },
            error:function(){

            },
        });
});

Projects是包含数据库中项目列表的页面。因此，每次删除项目时，列表都会更新，其工作正常，但每次调用ajax请求加一（+1）时间

Answer 1

快速而肮脏的解决方案是：

仅导入#projects1元素而不是整个文档
替换现有文档的#projects1元素父元素的内容（以便替换#projects1元素本身）

这样：

$("#projects1").parent().load("projects #projects1");

...但更好的解决方案是让{!! URL::to('deleteproject') !!}返回给出true或false响应的JSON，然后删除实际点击的元素：

在var $clicked_element = $(this);之上添加var dataId = $(this).data("id");，并在请求成功时添加$clicked_element.remove()。（或者可能像$clicked_element.parents("tr").remove() ......但我不得不推测你的HTML是什么样的。）

注意：您的HTML意味着您有多个ID为#npDelete的元素。这是无效的HTML。不要这样做。使用类来标识相关元素的组。仅使用id来标识唯一元素。

Answer 2

做

$("#projects1").html("projects");

我建议你使用

$(document).ready(function(){});

或

$("#target").on('click',function(){});

在代码的开头，而不是使用$(document).on('click',function(){});

刷新页面内容而不是在ajax中使用.load

2 个答案: