Question

经过大量的研究，我来到这里请求你的帮助，有我的问题：

我在同一页面上有多个表单的评论系统（我在Symfony上使用FOSCommentBundle）。我希望能够用Ajax发布评论（这部分工作，没有问题），并在提交帖子后刷新评论部分（我坚持这部分）。

有一个代码示例：

$(document).on("submit", ".postAjax", function(e){
    e.preventDefault();
    $(this).LoadingOverlay("show");
    data = $(this).serializeObject();

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        success:function(){
            $(".comments").load(window.location.href + " .comments");
        }
    });
});

<form method="POST" class="postAjax" action="./comment/post/1">
  <input type="textarea" name="comment">
  <input type="hidden" name="identifier" value="1">
  <input type="submit">
 </form>
 <div class="comments">
   <!-- Comments refreshed after post here -->
 </div>
 
 <form method="POST" class="postAjax" action="./comment/post/2">
  <input type="textarea" name="comment">
  <input type="hidden" name="identifier" value="2">
  <input type="submit">
 </form>
 <div class="comments">
   <!-- Comments refreshed after post here -->
 </div>
 
 <!-- ... -->

我已经尝试了很多东西，JQuery的函数“.load”但它加载了所有“comments”类并复制了每个类中的注释。

如果有人有解决方案......谢谢

Answer 1

试试这个

$(document).on("submit", ".postAjax", function(e){
    e.preventDefault();
    $(this).LoadingOverlay("show");
    data = $(this).serializeObject();

    var $comment = $(this).next(".comments");

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        success:function(){
            $comment.append("<div />");
            $comment.last("div").load(window.location.href + " .comments");
        }
    });
});

Answer 2

首先，在提供的代码中，您的<form>代码缺少操作属性，以使代码正常工作。

然后，要回答您的问题，请修改您的控制器操作（保存新注释的操作），以便它返回提交的注释的信息（json格式更好）。然后，将返回的json转换为html代码，并将结果附加到您的评论<div>，例如：

$(document).on("submit", ".postAjax", function(e){
    e.preventDefault();
    $(this).LoadingOverlay("show");
    data = $(this).serializeObject();
    var element = $(this);

    $.ajax({
        url: $(this).attr('action'),
        type: 'POST',
        success:function(newCommentData){
            /* do some process here to transform your newCommentData array into html code */
            $(element).next(".comments").append(newCommentData);
        }
    });
});

此外，如果您希望它更干净，您可以使用与评论div相同的模型隐藏＆＃39; div，但每个内容都替换为模式（例如：{{1} }，%commentTitle%）。然后，每次发布新评论时，您都可以隐藏%commentBody%，并将模式替换为您的评论数据。这样，如果您稍后更改注释部分结构，JS脚本仍将以相同的方式工作，无需进行任何调整。

发布ajax Javascript后刷新特定的类

2 个答案: