Question

我在每个配置文件上都有一个“墙”，我希望它更智能，所以你不需要更新页面来查看你刚刚提出的插入信息。

当您插入消息时，它会进行ajax调用并插入数据库，并且您会收到有关它的消息。但是现在您需要刷新页面以查看插入的消息。我想要做的是，如果你插入一条新消息，它应该用表格下面的消息淡化/刷新墙。我怎么能这样做？

我已经努力了，并尝试制作一个新文件，插入所有编码以显示评论然后我设置超时刷新每2秒

 function ajax_update() {
    var wrapperId = '#box';
    var profileID = document.getElementById('profileID');
    var postFile = 'showcomments.php?id='+ profileID.value;

    _v++;
    _v2++;

    $.post(postFile, { v2: _v2 , v: _v},
      function(data){
        $(wrapperId).html(data);
      });
    setTimeout('ajax_update()', 2000);
  }

但这并不好，因为它会拨打太多服务器电话，所以希望你能帮助我，因为我不知道我应该如何以一种很酷的方式做到这一点

使用ajax调用的表单： http://phpbin.net/x/838833504

我目前的php代码从db中获取并在消息中列出： http://phpbin.net/x/2145692361

Answer 1

一种方法是从服务器上的.post()处理程序返回新更新的墙列表。然后在回调中，用该内容重新绘制墙区域（忘记使用setTimeout()）。您也可以做同样的事情，但是按消息处理消息，将最新消息添加到墙内容区域中“堆栈”的顶部。

所以，重新粉刷整个墙：

$.post(postFile, { v2: _v2 , v: _v},
  function(data){
    // make your server return the updated wall content
    // return data.whatever
    //        data.wallcontent
    $('#wrapperId').html(data.wallcontent);
});

或消息留言：

$.post(postFile, { v2: _v2 , v: _v},
  function(data){
    // make your server return the new message ready for insert
    // return data.whatever
    //        data.message_you_just_posted_formatted
    $('#wrapperId')
      .prepend( data.message_you_just_posted_formatted );
});

这是基本的想法。

Answer 2

我建议稍微改变一下方法：

通过AJAX
在该AJAX帖子的成功回调中，创建一个包含已提交内容的元素，并将其附加到页面上的帖子列表中。
如果你想让它看起来很酷，只需使用一些内置的动画效果（fadeIn，show等）。

这样，您就不会一直轮询更改，只需在页面加载时从服务器请求内容。

function DoWallInsert(){

  var wrapperId = '#box';
  var profileID = document.getElementById('profileID');
  $("#insert_response").html("Laddar..");

  $.ajax({ 
   type: "POST",
   url: "misc/insertWall.php",
   data: {
       value: 'y',
       BuID : $('#BuID').val(),
       uID : $('#uID').val(),
       message : $('#message').val() 
   },
   success: function(msg){
       // in here you will have to add the message to the top of the list of wall posts
       // to do this you use prepend whatever html and the message in whatever way you 
       // are using to display the messages.
       $(wrapperId).prepend("<div>" + $('#message').val() + "</div>");
   }
 });
}

html之前可能看起来像这样：

<form action="javascript:DoWallInsert()" method="post">
    <input name="message" type="text" id="message" value="" size="40">
    <input type="hidden" name="BuID" id="BuID" value="123123">
    <input type="hidden" name="uID" id="uID" value="53425">
    <input name="submit" type="submit" id="submit" value="Skicka">
</form>

<div id="box">
    <div id="post-1">Some stuff</div>
    <div id="post-2">Some other stuff</div>
</div>

html应该如下所示：

<form action="javascript:DoWallInsert()" method="post">
    <input name="message" type="text" id="message" value="" size="40">
    <input type="hidden" name="BuID" id="BuID" value="123123">
    <input type="hidden" name="uID" id="uID" value="53425">
    <input name="submit" type="submit" id="submit" value="Skicka">
</form>

<div id="box">
    <div>Whatever was typed in the box</div>
    <div id="post-1">Some stuff</div>
    <div id="post-2">Some other stuff</div>
</div>

如果要附加到帖子列表的html中有php，那么我最好的建议是在AJAX调用中将服务器响应中的新div的html返回到：{{1 }}

misc/insertWall.php应该返回insertWall.php。然后您可以处理它并将其显示在"<a href='profil.php?id=".$userinfo[id]."'>".$userinfo["full_name"]."</a>"的{{1}}部分：

success

PHP / jQuery：插入后的Fadein / refresh

2 个答案: