如何在Ajax调用（jQuery）之后更新DOM？

如何在通话后添加新记录添加元素来更新DOM？如何在Ajax调用（jQuery）之后更新DOM？

我应该在回调中返回新插入的db记录内容，然后使用jquery追加？

如果没有足够的数据来回答问题，请指教。

$(function(){ 

     $('#postentry').submit(function() { 
      var tyu = $('#tittle_ent').val(); 
      if(tyu.length <= 2) 
      {alert('Enter More Text!'); return false;}else 
      { 
       $.post( 
       "posts_in.php", 
       $("#postentry").serialize(), 
        function(data){ 
         //alert(data); 
        } 
       ); 
       return false; 
      } 
     }); 

    });

每个记录是这样的：

<div id="post349" class="myclass"> 
This is some text.  
</div>

来源

2011-07-15 Codex73

我会使用$.ajax()代替$.post()：

$.ajax({ 
    type:'post', 
    url: 'posts_in.php', 
    data: $("#postentry").serialize(), 
    success:function(data){ 
     var id='post349'; 
     $('<div></div>').attr('id',id).addClass('myclass').html(data).appendTo('#records_wrapper'); 
    } 
});

如何在div将被追加，人口快速演示：http://jsfiddle.net/AlienWebguy/zuPA2/1/

来源

2011-07-15 22:47:53 AlienWebguy

容易理解。谢谢。 – Codex73

如何返回新添加的记录的ID以便插入？ – Codex73

你想从posts_in.php页面返回一个JSON对象，如下所示：'echo json_encode（'{“id”：“post349”，“record”：“这是一些文本”}'）;'' 。然后在你的ajax'success：function（）'中，你可以将该对象引用为'data.id'和'data.record'。你还需要将'dataType：'json''添加到你的ajax参数中，以便JQuery知道如何解析传入的数据。 – AlienWebguy

$.post( 
    "posts_in.php", 
    $("#postentry").serialize(), 
     function(data){ 
      $('#myDivOnThePage').append(data); 
     } 
);

来源

2011-07-15 22:45:10 wanovak

如果数据包含了新的记录，所以是的，分析它，并追加在那里，喜欢你想要的。

通过创建一个实例的新jsfiddle.net，我可以帮你多一点点......

来源

2011-07-15 22:46:20 ChristopheCVB

您可以在周围的div从PHP返回一个完整的记录或者你可以得到新插入ID并在javascript中创建记录。

来源

2011-07-15 22:47:31 jeroen

如何在Ajax调用（jQuery）之后更新DOM？

回答

相关问题