如何在jquery ajax之后刷新网站的一部分而不刷新整个页面
Posted
技术标签:
【中文标题】如何在jquery ajax之后刷新网站的一部分而不刷新整个页面【英文标题】:how to refresh part of a site without refreshing the entire page after jquery ajax 【发布时间】:2012-03-28 18:40:39 【问题描述】:我正在制作一个动态问题论坛,我只想在用户发布新主题时刷新主题列表,我不想刷新整个页面。这可能吗?
这是我对列出帖子的表格的标记:
<table class="topics">
<tr>
<th ></th>
<th ><a href="">Subject</a></th>
<th ><a href="">Author</a></th>
<th ><a href="">Replies</a></th>
<th ><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?
);
)
【问题讨论】:
你的问题到底是什么? 【参考方案1】:你基本上需要把东西推送给客户端
你可以使用这3种方法
-
在所有页面中,您可以继续进行 ajax 调用以检查是否有
添加了新主题(长轮询)
您可以尝试使用 COMET
现代浏览器中有一种叫做 web-sockets 的东西,你可以试试看
你可以像这样实现长轮询
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;
【讨论】:
如何实现 nr 1?任何指针? web-sockets 不适用于所有浏览器 你可以使用 socketio :) 长轮询是这样的你使用 document.setInterval("func()",10000);调用一个每 10 秒进行一次 ajax 调用的函数,该函数返回最新的问题。如果你愿意,我将编辑我的答案!【参考方案2】:您需要一个服务器端脚本来为您要“刷新”的页面部分生成标记。
然后使用 jQuery 将该区域的内部 HTML 设置为您完成一些工作后服务器返回的内容。
PS 把你的问题整理好,懒惰以后不会给你带来好处的。
【讨论】:
【参考方案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) );
);
success(data, textStatus, jqXHR)Function, Array
请求成功时调用的函数。函数得到 传递了三个参数:从服务器返回的数据,格式化 根据dataType参数;描述状态的字符串; 和 jqXHR(在 jQuery 1.4.x 中,XMLHttpRequest)对象。从 jQuery 开始 1.5、成功设置可以接受数组函数。每个函数都会被依次调用。这是一个 Ajax 事件。
【讨论】:
实际上success()
、error()
和 complete()
回调将在 jQuery 1.8 中被一些 Ajax 函数弃用。要为将来的最终删除准备代码,使用 done()
、fail()
和 always()
没有任何问题。
@adeneo 谢谢你的提示!我不知道!但是现在1.7.1已经发布了,你知道1.8什么时候发布吗?
不!我所知道的是可以使用新版本的 Ajax 回调(我相信从 1.6 开始),并且它在 jQuery 的网站上这么说。 jQuery 1.7 才几个月大,上周发布了 1.7.2rc1,所以 1.8 可能还不会出来?
即使您不知道应该使用最佳实践,而最佳实践正在使用 .done()以上是关于如何在jquery ajax之后刷新网站的一部分而不刷新整个页面的主要内容,如果未能解决你的问题,请参考以下文章