ASP jQuery AJAX无刷新评论

呱呱叫GO

呱呱叫GO

2016-02-19 20:04

今天图老师小编给大家展示的是ASP jQuery AJAX无刷新评论,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

  做公司网站时的一个应用,用猫东的表单验证插件做实时的验证,和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);
    }
  });
}

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  //添加评论到数据库,同时更新显示,注意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;""trtd 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 cnt0
    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 rscnt0 then
  pagehtml="div class=""comm_page""已有{$rscnt$}条评论 {$link_list$}/div"
  pagehtml=replace(pagehtml,"{$rscnt$}",rscnt)
  If pagenum1 then
    for i=1 to pagenum
      linkhtml=linkhtml & IIf(i=page,i & "&nbsp","a href=""javascript:getComments(" & i & ")""" & i & "/a ")
    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()添加评论,很容易就完成了

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

ASP jQuery AJAX无刷新评论

Web开发
ASP jQuery AJAX无刷新评论

ASP+Ajax实现无刷新评论简单例子

Web开发
ASP+Ajax实现无刷新评论简单例子

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

ASP+AJAX打造无刷新新闻评论系统

Web开发
ASP+AJAX打造无刷新新闻评论系统

AJAX技术 vs 传统的ASP无刷新技术

电脑网络
AJAX技术 vs 传统的ASP无刷新技术

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

AJAX技术vs传统的ASP无刷新技术

Web开发
AJAX技术vs传统的ASP无刷新技术

AJAX和传统的ASP无刷新技术比较

Web开发
AJAX和传统的ASP无刷新技术比较

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在桌面应用中使用JAVA DB

在桌面应用中使用JAVA DB

Excel中VLOOKUP函数的应用

Excel中VLOOKUP函数的应用
下拉加载更多内容 ↓