如何更新的Ajax调用（jQuery的）之后的DOM？ [英] How can I update the DOM after Ajax Call (jQuery)?

问题描述

通话后我如何更新与新添加的记录元素的DOM？

我应该返回待命新插入数据库记录的内容当时追加使用jQuery？

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

  $（函数（）{

        $（'＃后补）。递交（函数（）{
          。VAR TYU = $（'＃tittle_ent）VAL（）;
          如果（tyu.length＆其中; = 2）
            {警报（请输入更多的文字！'）;返回false;}其他
            {
                $。员额（
                 posts_in.php
                 $（＃后补）。序列化（）
                    功能（数据）{
                        //警报（数据）;
                    }
                ）;
                返回false;
            }
        }）;

    }）;
 

每个记录是这样的：

 ＆LT; D​​IV ID =post349级=MyClass的＆GT;
这是一些文本。
＆LT; / DIV＆GT;
 

解决方案

我会使用 $。阿贾克斯（），而不是 $的。后（）：

  $。阿贾克斯（{
    类型：'后'，
    网址：posts_in.php，
    数据：$（＃后补）序列化（）。
    成功：功能（数据）{
        VAR ID ='post349';
        $('<div></div>').attr('id',id).addClass('myclass').html(data).appendTo('#records_wrapper');
    }
}）;
 

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

How can I update the DOM with new record added element after call?

Should I return the newly inserted db record contents on call back then append using jquery?

Please advice if not enough data to answer question.

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

    });

Each record look like this:

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

解决方案

I'd use $.ajax() instead of $.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');
    }
});

Quick demo of how the div will be appended and populated: http://jsfiddle.net/AlienWebguy/zuPA2/1/

这篇关于如何更新的Ajax调用（jQuery的）之后的DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！