Question

我正在构建一个项目，并且是第一次使用Ajax。目前，我有一个数据表，我使用Ajax添加和删除表中的记录，而无需重新加载页面。我想要做的下一步是在数据添加或删除数据时刷新表中的数据。

在我的Ajax代码中，我有以下内容：

$(document).ready(function(){

$('form#TesttableIndexForm').submit(function(event){
    event.preventDefault();

    $.ajax({
        url:'/testing/save_ajax_data',
        type:'POST',
        data: $("form#TesttableIndexForm").serialize(),
        success: function(data) {
            $("#testtable").replaceWith(data);
        },

    });     
});

$('a.deleteajax').click(function(event){
    event.preventDefault();

    var answer = confirm("Delete this record?")
    if (answer){
        $.ajax({
            url:'/testing/delete_ajax_data/',
            type:'GET',
            data: $(this).attr("href"),
            success: function(data) {
                $("#testtable").replaceWith(data);
            },
        });
    }

    return false;  
});

});

表的ID是#testtable。我在代码的$("#testtable").replaceWith(data);部分添加了success，以便在添加或删除数据时刷新表格。

但是，即使仍然可以使用该Ajax代码删除和添加数据，当任何一个事件发生时，表都会消失。当我手动重新加载页面时，表格会重新显示修改后的数据。

我正在使用CakePHP，表中的数据是从数据库生成的。这会给我带来麻烦吗？

提前致谢！

Answer 1

弄清问题是什么。

在我的Ajax文件中，我添加了var loadUrl = "/test-area/table/";，这是一个加载HTML表的控制器的URL。然后我必须在我的控制器中创建一个函数来基本上再次查询数据库：

function testtable() {
    $this->layout = 'ajax';
    $this->loadModel('Testtable');

    $testing = $this->Testtable->find('all');
    $this->set('testing', $testing);
}

在玩这个时我注意到的是，如果你没有指定$this->layout = 'ajax';，它将加载具有默认布局的页面。然后这完全打破了页面。所以我创建了一个名为ajax的完全空白的布局文件。

然后，在ajax代码中，我删除了：

$("#testtable").replaceWith(data);

使用：

$("#testtable").load(loadUrl + "#testtable");

将所有这些内容放在一起，当添加或删除记录时，表格将会毫无问题地重新加载。

Ajax删除整个HTML表而不是刷新它

1 个答案: