Question

如何在调用后使用新记录添加元素更新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>

Answer 1

我使用$.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/

Answer 2

您可以从php返回周围div中的完整记录，也可以只获取新插入的ID并在javascript中构建记录。

Answer 3

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

Answer 4

如果数据包含新记录，那么是，解析它并附加到你想要的地方。

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

Answer 5

您可以在JS文件中编写此代码

 $.ajax({
    type: 'POST',
    url: posts_in.php,
    data: {
       action: 'updateDomAfterAjaxCall',
       post_id: postentry
   },

   success: function(data, textStatus, XMLHttpRequest) {

       var linkid = '#' + postentry;
       jQuery(linkid).html('');
       jQuery(linkid).append(data);

   },
   error: function(MLHttpRequest, textStatus, errorThrown) {
       alert(errorThrown);
   }
 });

您可以在后端代码中执行此操作。在这种情况下，我使用了PHP。

 function updateDomAfterAjaxCall() {

    $post_ID = $_POST['post_id'];
    // Carefully tranverse the dom to 
    // Update records of the DOM that is 
    // affected by the new entry
    // so that it behave almost like
    // headless browser
    // Target footer-postentry
    // header-postentry, sidebar-postentry, content-postentry

    $result = '';
    $record_from_db = ""

    $results.='<div class="myclass" >'.$record_from_db.'</div>';
    die($result);
  }

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

5 个答案: