Question

我目前正在使用AJAX进行实时提交帖子，然后将其附加到列表中。我遇到的问题是当我多次提交帖子时，AJAX会覆盖之前提交的帖子。

var data = $("#form_write_post").serialize();
$.ajax({
    type: "POST",
    url: $("#form_write_post").attr("action"),
    data: data,
    beforeSend: function() {
        $("ul.timeline").prepend("<img class='textarea_ajax_loading' src='img/ajax-loader.gif' style='margin: 0 auto; display: block;' />");
    },
    complete: function() {
        $('.textarea_ajax_loading').remove();
    },
    success: function () {
        //var successCount = successCount++;
        $("ul.timeline").prepend('<li class=ajax_post></li>').fadeIn();
        $("ul.timeline .ajax_post").load("ajax_post.php").fadeIn();
        //$('ul.timeline').prepend(wall_post);
        //console.log("success");
        return false;
    }
});

每次提交后如何才能获得新帖？

由于

Answer 1

我不确定我是否完全理解您的问题，但当您说＆＃34; AJAX会覆盖之前提交的帖子＆＃34;我认为问题出在前端吗？

从我看到的代码中，可能是因为您添加了一个新的<li class=ajax_post></li>，然后您选择了此类的所有li并在所有类中加载了一些内容。

如果您只想在最新的li中加载内容，请将选择器更改为

 $("ul.timeline .ajax_post:first").load("ajax_post.php").fadeIn();

仅选择第一篇文章。

Answer 2

您正在将新内容插入到同一班级的每个孩子中。而不是使用类，您应该使用ID：在Ajax调用之外声明count，然后执行以下操作。

success: function () {
  count = count++;
  $("ul.timeline").prepend('<li class=ajax_post id="post'+count+'"></li>').fadeIn();
  $("#post"+count).load("ajax_post.php").fadeIn();

AJAX覆盖

2 个答案: