如何在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？

回答

相關問題