正 文:
我们在制作自己的网站时,一般会开放博客的评论系统,以供博主和访客互动,大家可以看到wordpress博客评论系统就是利用ajax技术实现的无刷新的模块。ajax实际并不复杂,我们多多少少都有接触,js前台+asp/php等后台服务器脚本之间的交互。
飘易花了点时间,把飘易博客的评论系统也改成了ajax无刷新评论系统。主要有这样的一个 js 文件,例如我的命名为 com.js,以及对应的后台服务器脚本,如asp\php文件。
剩下的就是利用ajax提交给后台服务器脚本处理了,返回相应的处理后的代码给js,回传显示就ok了,当然,下面的代码没有加入一些判断,比如是否为空,是否含非法关键字等的判断,你可以自行增加修改。
com.js代码:
//利用AJAX的无刷新评论
function subok(){
var xmlhttp;
try{
xmlhttp = new XMLHttpRequest();
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlhttp = null;
alert("您的浏览器不支持XMLHTTP,无法完成此操作!");
}
}
}
xmlhttp.open("POST", "../addcom.asp", false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gb2312");
xmlhttp.send("c_id1="+document.getElementById('c_id1').value+"&c_name="+escape(document.getElementById('c_name').value)+"&c_email="+escape(document.getElementById('c_email').value)+"&c_site="+escape(document.getElementById('c_site').value)+"&c_content="+escape(document.getElementById('c_content').value));
if(xmlhttp.status==200){
strText = xmlhttp.responseText;
document.getElementById("commtwait").innerHTML=strText;
document.getElementById("c_content").value="";
}
}
几个注意点:1、js是对大小写敏感的。 2、后台服务器脚本要做好安全判断,js毕竟是客户端的东西,我们不可全部相信。 3、 js和asp后台之间的汉字编码问题,我们可以同时指定它们均为 gb2312 编码。4、提交的时候不要用 form 表单提交,直接使用 <input type="submit" name="s" value=" 提交 " onclick="subok()" /> 这样的 onclick 事件提交。
大家可以测试一下
飘易博客的 ajax 无刷新评论系统,你发布一个评论就可以看到效果了,同时兼容IE和firefox浏览器。
再次回来,其实我的博客早就实现了ajax的评论提交方式,但我想改的效果是,ajax提交后,评论能生成静态!我看zblog的评论在提交后是重新生成了一下该篇日志文件!不知道你的评论系统是怎么处理的呢?我看你前台提交后并未立即通过审核,那是不是你在后台审核的同时生成日志静态呢?望不吝回复!
提交后评论列表能自动刷新吗(新评论自动添加到后面)
回复:haibor
我的前台提交后的确没有立即通过审核,为了防止spam,当我在后台审核的同时再生成日志静态的。
你好 ,可以和贵站换连接吗
www.yublog.com.cn seo www.chengyubase.cn 梦游娃娃
www.antaxie.com 安踏 www.52anakng.cn 西安百度
www.sneac.org 招生考试信息网 www.cos30.cn
回复:5 watano
由于我的评论需要审核,前台提交后,并没有立即审核,立即刷新列表也是容易做的,把评论放到一个容器,使用innerHTML替换即可。
haibor:
如果你的评论无需审核,希望ajax提交后,评论能生成静态,也是容易实现的:就像zblog,提交后后台重新生成日志,前台用ajax刷新评论列表容器,显示出最新的评论。这样无论用户是否再次刷新该页,他都能看到最新的评论了。
这个不错,要是你能帮忙解决一上Zblog回复后不重复的问题,就非常感激不尽了。
详细问题描述可以移步这里:http://www.17gogo.net/blog_growth/love_blog_diy.html
xmlhttp.open("POST", "../addcom.asp", false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=gb2312");
xmlhttp.send("c_id1=" document.getElementById('c_id1').value "&c_name=" escape(document.getElementById('c_name').value) "&c_email=" escape(document.getElementById('c_email').value) "&c_site=" escape(document.getElementById('c_site').value) "&c_content=" escape(document.getElementById('c_content').value));
if(xmlhttp.status==200){
strText = xmlhttp.responseText;
document.getElementById("commtwait").innerHTML=strText;
document.getElementById("c_content").value="";
}
klkl
测试下,无刷新评论,要规定吗测试下,无刷新评论,要规定吗测试下,无刷新评论,要规定吗测试下,无刷新评论,要规定吗