在不重新加载页面的情况下更新页面数据的正确过程答案

【问题标题】：Correct procedure for updating page data without page reload在不重新加载页面的情况下更新页面数据的正确过程
【发布时间】：2013-11-29 10:14:31
【问题描述】：

早上好，所以我写了一个 cms 来学习，但一直遇到同样的问题。

例如，当更新博客文章时，我希望在不重新加载页面的情况下更改数据。这样用户就可以看到它的发生，而不必滚动回帖子。一切都一样，删除、移动、编辑标题等。

目前我使用 .load()。但它对我的脚本造成了严重破坏。

我使用 ckEditor，如果我使用 .load 重新加载 div，ckEditor 不存在，所以我猜测脚本无法工作/加载。我的所有更新都是通过 ajax 调用进行的，如果执行 .load 然后尝试执行另一个更新操作（不刷新页面），它会转到 php 页面并忽略 javascript ajax 调用和验证等。

这是一个例子：

if (check) {
            $.ajax({
                type: "POST",
                url: "process/deletepost.php",
                data: $targetForm.serialize(),
                dataType: "json",
                success: function (response) {

                    if (response.deleteSuccess)
                    $targetForm.find('.editor').toggle(),
                    <!-- Check for .buildtext id etc to prevent it showing any other posts when updating it -->
                    $("#container").load(response.pageurl + "#container"),
                    $targetForm.find('.edity').toggle(),
                    $targetForm.find('.saveupdatebutton').toggle(),
                    $targetForm.find('.deleteupdatebutton').toggle();
                    else
                    $ckEditor.after('<div class="error">Something went wrong!</div>');

                }
            });
        }
        return false;
    }

#container 包含所有博客文章，因此目的只是重新加载它们。

关于我哪里出错/我应该做什么来实时加载数据的任何帮助。

谢谢，克雷格。

【问题讨论】：

标签： javascript php jquery ajax json

【解决方案1】：

您可以使用 JQuery 模板代替加载函数。只需创建博客模板，使用 Ajax 调用带来数据并将模板与数据一起附加。

$.ajax({
     type: "POST",
     url: "process/Update.php",
     data: $targetForm.serialize(),
     dataType: "json",
     success: function (response) {
          $("#template_Name").tmpl(response.Data).prependTo($("#somediv"));
             //do Something
          }
     });

将模板写成

<script id="template_Name" type="text/x-jquery-tmpl">
     <div id="${blogid}">
        ${BlogData}
     </div>   
</script>

【讨论】：