0

我正在构建一个项目，并且是第一次使用 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，表中的数据是从数据库生成的。这会给我带来问题吗？

提前致谢！

4

1 回答 1

0

弄清楚问题出在哪里。

在我的 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");

结合所有这些，当添加或删除记录时，表将重新加载而不会出现问题。

于 2012-04-13T09:40:56.537 回答