ASP jQuery AJAX无刷新评论

做公司网站时的一个应用,用猫东的表单验证插件做实时的验证,和jquery的ajax提交数据,获取评论的时候加入简单的分页

原理很简单,注意一下编码问题就行了
实现了获取评论无刷新,发表评论无刷新,页面获取评论时显示loading加载效果

jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,实现起来都非常的简单,往往就是几句代码的事。

做AJAX应用,jquery提供的$.get()、$.post()函数都可以用于提交数据,但建议使用$.ajax()来提交,那两个函数都不提供错误返回信息,不利全面掌控。

看代码实现,这里我删减了一部分,便于说明(comments.asp):

$(function(){
    //页面初始化时获取评论内容
    getComments(1);
});
//获取评论内容
function getComments(pageno){
    $.ajax({
        type:
"GET",
        url:
"proc_comments.asp",
        data:
"action=getComments&id=44&page="+pageno+"&num="+Math.round(Math.random()*10000),
        error:
function(){$("#comm_list table tr td").html("获取评论信息失败");},
        success:
function(comments_data){
            $(
"#comm_list").html(comments_data);
        }
    });
}
//添加评论到数据库,同时更新显示,注意escape编码后提交
function addComments(){
    
if($.formValidator.pageIsValid()){
        $.ajax({
            type:
"POST",
            url:
"proc_comments.asp",
            data:
"action=addcomments&id=44&comm_user="+escape($("#comm_user").val())+"&comm_content="+escape($("#comm_content").val()),
            success:
function(){
                getComments(
1);
            }
        });
    }
}

这里的$.formValidator.pageIsValid()猫东的表单验证插件的一个表单验证函数,我用button替代了原有的submit,在它的onclick事件中添加addComments()函数提交评论,为避免空提交,这里提交前先做验证。

提交数据是action代表要执行的操作,id传递文章id,page是请求的分页页面,Math.round(Math.random()*10000)防止页面被浏览器缓存而导致暂时无法刷新,如果出错显示错误信息

客户端用escape()函数编码含中文的字符串,服务器端用unescape()解码,这样做是为了防止乱码,如果你采用的是utf8,那就不必了,设置正确的页面编码和服务端脚本编码就不会出问题。由于jquery默认使用utf8传输数据,而且不提供设置编码,这里只有自己做转换,如果你用form插件的时候就会发现,编码问题是不能回绝的,看来以后得向utf8看起了,呵呵!

看以下处理代码,长了点,不过就三个函数,一个分支语句(proc_comments.asp):

< ! -- #include file = " conn.asp " -->
< %
response.charset
= " gb2312 "
dim  action,id
action
= Lcase ( trim (Request( " action " )))
id
= trim (Request( " id " ))
select   case  action
case   " getcomments "
    
dim  pageno
    pageno
= trim (Request.QueryString( " page " ))
    
call  getComments(id,pageno)
case   " addcomments "
    addComments(id)
case   else
    Response.Write 
" else "
end   select

Function  IIf(bExp1, sVal1, sVal2)
    
If  (bExp1)  Then
        IIf 
=  sVal1
    
Else
        IIf 
=  sVal2
    
End   If
End Function

' 操作数据库返回评论内容,包含了分页的显示
function  getComments(id,page)
tempstr1
= " <div class=""comm_item""> "   &  vbcrlf  & _
        
" <h4>网友:{$comm_user$} 发表于 {$comm_pubdate$}</h4> "   &  vbcrlf  & _
        
" <div class=""comm_item_body"">{$comm_content$} "   &  vbcrlf  & _
        
" </div> "   &  vbcrlf  &   " </div> "   &  vbcrlf
tempstr2
= " <table width=590 height=292 border:1px solid #CCC;margin:5px 5px;""><tr><td align=center>暂无人发表评论</td></tr></table> "

dim  rethtml
openConn(dbfile)
sqlstr
= " select * from comments where comm_pid= "   &  id  &   "  order by comm_subdate desc "
' sqlstr="select * from comments"
call  openRS(sqlstr, 1 )
dim  rscnt:rscnt = rs.recordcount
dim  pagesize:pagesize = 3
dim  pagenum
if  (rscnt  mod  pagesize) = 0   then
    pagenum
= rscnt / pagesize
else
    pagenum
= Int (rscnt / pagesize) + 1
end   if
If   not (rs.bof  and  rs.eof)  Then
    
dim  swaphtml,cnt
    rs.pagesize
= 3
    rs.absolutepage
= page
    cnt
= rs.pagesize
    
do   while   not  rs.eof  and  cnt > 0
        cnt
= cnt - 1
        swaphtml
= tempstr1
        swaphtml
= replace (swaphtml, " {$comm_user$} " ,rs( " comm_user " ))
        swaphtml
= replace (swaphtml, " {$comm_pubdate$} " ,rs( " comm_subdate " ))
        swaphtml
= replace (swaphtml, " {$comm_content$} " ,rs( " comm_content " ))
        rethtml
= rethtml  &  swaphtml
        rs.movenext
    
loop
else
    rethtml
= tempstr2
End   If
closeRS()
closeConn()
' 显示分页相关信息
If  rscnt > 0   then
    pagehtml
= " <div class=""comm_page"">已有{$rscnt$}条评论&nbsp;{$link_list$}</div> "
    pagehtml
= replace (pagehtml, " {$rscnt$} " ,rscnt)
    
If  pagenum > 1   then
        
for  i = 1   to  pagenum
            linkhtml
= linkhtml  &  IIf(i = page,i  &   " &nbsp " , " <a href=""javascript:getComments( "   &  i  &   " )""> "   &  i  &   " </a>&nbsp; " )
        
next
    
else
        linkhtml
= ""
    
end   if
    pagehtml
= replace (pagehtml, " {$link_list$} " ,linkhtml)
    rethtml
= rethtml  &  pagehtml
End   if
Response.Write rethtml
end function

' 处理提交的评论,添加到数据库,注意先unescape解码,否则乱码
function  addComments(id)
openConn(dbfile)
sqlstr
= " insert into [comments](comm_user,comm_content,comm_pid) values(' "   & _
         unescape(
trim (Request.Form( " comm_user " )))  &   " ',' "   &  unescape( trim (Request.Form( " comm_content " )))  &   " ', "   &  id  &   " ) "
conn.execute(sqlstr)
closeConn()
end function

%>

IIf()是一个简化函数,getComments()返回评论信息,有两个参数,文章id和分页编码,addComments()添加评论,很容易就完成了,源码贴上了:

代码:comments.rar

不赘述了,IE8写文章太麻烦了,编辑器问题太多了。

你可能感兴趣的:(jQuery ajax)