AJAX覆盖

I'm currently using AJAX for live submit a post which is then appended to a list. The problem I am having is when I submit a post more than once, AJAX overwrites the previous posts submitted.

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;
    }
});

How can I achieve a new post after each submission?

Thanks

I'm not sure that I fully understand your problem, but when you say "AJAX overwrites the previous posts submitted" I assume the problem is on the front-end right?

From the code I see, it might be because you prepend a new <li class=ajax_post></li> and then you select all the li with this class and load something in all of them.

If you want to load something only in the latest li, change the selector to

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

to select only the first post.

you're inserting the new content into every child of the same class. instead of using classes you should be using IDs: declare count outside your Ajax call and then do the following.

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