Question

我正在制作一个动态问题论坛，我想在用户广告新主题时仅刷新主题列表，我不想刷新整个页面。这可能吗？

这是我列出帖子的表格的标记：

<table class="topics">
    <tr>
        <th width="5%"></th>
        <th width="45%"><a href="">Subject</a></th>
        <th width="15%"><a href="">Author</a></th>
        <th width="10%"><a href="">Replies</a></th>
        <th width="10%"><a href="">Views</a></th>
    </tr>
    <?php foreach ($discussions as $discussion) : ?>
    <tr class="alt">
        <td><a href=""><img src="<?= site_url('assets/images/featured-posts-icon.png') ?>" /></a></td>
        <td><a href="<?= site_url('discussion/test/' . $discussion->stub) ?>" class="subject"><?php echo $discussion->title; ?></a></td>
        <td><a href=""><?php echo $discussion->author; ?></a></td>
        <td><?php echo $discussion->replies; ?></td>
        <td><?php echo $discussion->views; ?></td>
    </tr>
    <?php endforeach; ?>
</table>

添加新帖子的标记：

<input type="text" name="topic" id="topic" />
<ul class="editor-tools">
    <li class="bold"></li>
    <li class="italic"></li>
    <li class="underscore"></li>
    <li class="list"></li>
    <li class="quote"></li>
</ul>
<textarea id="thread-content"></textarea>
<a href="" class="button create-discussion">Start discussion</a>

我正在使用php获取帖子。现在，当我使用ajax添加新帖子时，我有以下代码：

$('a.create-discussion').on('click', function(e){
    e.preventDefault();
    var title = $('input#topic').val(),
        courseId = 1,
        message = $('textarea#thread-content').val();

    $.ajax({
        type : 'POST',
        url : ROOT_PATH + 'main/ajaxjson/create_discussion',
        data : {title: title, courseId: courseId, message: message},
        dataType: 'json'
    }).done(function(result){
        // do something here?
    });
})

Answer 1

您需要一个服务器端脚本来生成您想要“刷新”的页面部分的标记。

然后使用jQuery将该区域的内部HTML设置为服务器在完成某些工作后返回的内容。

PS整理你的问题，懒惰在未来不会对你有利。

Answer 2

你基本上需要把东西推到客户端

你可以使用这3种方法

从所有页面中你可以继续进行ajax调用以检查a 添加了新主题（长轮询）
您可以尝试使用COMET
现代浏览器中有一些叫做web-socket的东西，你可以尝试一下

您可以像这样实施长轮询

  window.setInteval("func()",10000);

  function func()
  {
      //ajax call to you server which returns the latest posts
      str = xhr.responseText;

      if(str)
      {
           document.getElementById("id").innerHTML += str;
      }
  }

Answer 3

您应该使用而不是done（）

success:function(){
       // do something here
}

就像在jQuery文档中一样：

$.ajax({
  url: 'http://fiddle.jshell.net/favicon.png',
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( 'text/plain; charset=x-user-defined' );
  },
  success: function( data ) {
    if (console && console.log){
      console.log( 'Sample of data:', data.slice(0,100) );
    }
  }
});

成功（data，textStatus，jqXHR）函数，数组

请求成功时要调用的函数。功能得到   传递了三个参数：从服务器返回的数据，格式化   根据dataType参数;描述状态的字符串;   和jqXHR（在jQuery 1.4.x，XMLHttpRequest）对象。截至jQuery   1.5，成功设置可以接受一系列功能。每个函数将依次调用。这是一个Ajax事件。

如何在jquery ajax之后刷新站点的一部分而不刷新整个页面

3 个答案: