单击锚时运行ajax以建立记录。

Question

我是jquery和ajax方面的新手，但我刚刚学习了如何使用jquery发布表单并保存它，现在我在模板中的表中有了一个记录列表，如下所示：

field1  field2  field3 <a href="#" id="rec1">del</a>
field1  field2  field3 <a href="#" id="rec2">del</a>
field1  field2  field3 <a href="#" id="rec2">del</a>
...

现在，我想删除一个记录时，点击它的锚标签。

编辑：这些记录已经使用ajax插入到数据库中，并立即以这种格式显示在表中，现在我将通过单击ajax的anchor来删除每条记录。

就像这样：

field1  field2  field3 <a href="#" id="rec2" onClick="f({{id}})">del</a>

我该怎么做？

Answer 1

我会的

首先:您需要有一个django视图来删除所选的项

第二:在url文件中定义指向该视图的模式，例如

(r'^delete/(\d{4})/$', 'delete_item'),

那么您的javascript应该如下所示：

function deleteAjax(item_id){
$.ajax({
    url: "delete/"+ item_id +"/",
    data: <the id of the record you want to delete>,
    success: function(){
        //here you do the processing needed to remove the row from the html;
    }
});
}

然后，您的html必须更改：

<a id="{{id}}" onclick="deleteAjax({{id}}); return false;"> delete item </a>

单击事件将触发javascript (deleteAjax)，并通过发送要删除的项的id调用正确的(django)视图。

只需注意几件事：

• -- django视图必须处理正确的响应，因为它将确定在执行结束时将调用哪个回调( ajax部分" success : function .“，您也可以有一个failure: function)
• 在成功函数中，您必须记住删除与已删除项对应的表行(如果删除成功)或通知(如果失败)

最后:我现在不确定您在ajax函数中发送的"data“参数，因为已删除项的id绑定到url。尽管如此，你还是可以用它发送你最终需要的东西

Answer 2

它将类似于onClick="$(this).closest('tr').remove()“

假设它是一个实际的表，正如您所说的，您有如下所示的html

<table><tr><td/><td/></tr></table>

Answer 3

@Samuele它起作用了！:D

tnx，听起来我的成功功能不起作用了

function f(id) {
                $.ajax({
                    url: "/meeting/delParticipant/"+id+"/",
                    type: "POST",
                    data: {'id':id},
                    success: function(res){
                        alert ('success');
                        $(this).closest('tr').remove();
                    }
                });
            };

我要删除表中的行，我使用警告来测试它，我确信成功不会运行！