我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容
我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页
页面中我们放置一个Div容器用来存放返回的内容
<div id="comment">
<img src="images/Wait.gif" title="数据载入中..." /></div>
注:wait.gif是一个类似进度条的效果,当没有加载的内容没有加载出来的时候,就显示这个效果,这样就能提高用户的体验度。然后最重要的就是jquery这块了,需要用到ajax来完成
代码:
type:提交的方式,可以为POST或者GET
success:通信成功后执行的函数
error:通信失败后执行的函数
beforeSend:通信前执行的韩硕
complete:通信完成后执行的函数
在这里采用了POST提交的方式,比Get更安全些,所以也可以替换成下面的方式
首先,接收参数的时候,在doAction.aspx页面里第一种方式使用Request.QueryString["fig"]接收,第二种方式使用的是Request.Form["fig"]
其次,第一种方式当通信失败后,可以友好的返回错误信息,第二种方式暂时没发现可以返回
然后在doAction.aspx页面中,只要进行相应的处理就可以了
using (CommentBO cm = new CommentBO(id, page - 1))
{
Response.Write(cm.getCommentContent());
}
}
同样如果才用Get的提交方式,使用$.get("",{},function(){})也是一样的..
另外一种加载内容的方式可以使load()方法,关于用法可以查阅api,简单说说上面的用load如何加载
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnLoad").click(function () {
$("#content").load("doAction.aspx",{fig:"reader",id:"1",page:"1"},function (responseText, textStatus, XMLHttpRequest) {
alert(responseText);
});
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" id="btnLoad" value="加载load" />
<div id="content">
</div>
</form>
</body>
</html>
这样就把内容加载到页面里了,有一点问题就是发现页面中返回的内容和alert弹出的有些不一样,alert弹出的返回html标签,而页面没有,那是因为页面已经解析了html代码
其他的添加,修改,删除等基本操作也是如此,大同小异,只是在doaction.aspx页面中调用不同的方法而已,下面把主要的jquery代码贴出来看看
function StopButton()
{
document.getElementById(arguments[0]).disabled=true;
document.getElementById(arguments[0]).value="提交("+arguments[1]+")";
if(arguments[1]>=1)
{
arguments[1]--;
window.setTimeout("StopButton('"+arguments[0]+"',"+arguments[1]+")",1000);
}
else
{
document.getElementById(arguments[0]).disabled=false;
document.getElementById(arguments[0]).value="提交";
}
}
DoAction.aspx页面的部分代码页贴出来
如果判断用户名是否有重复的时候,要使用$.getIfModified而不能是用$.get,大家可以测试一下
如果使用$.get你第一次注册了一个名字,你不要做其他的操作,你再在文本框里面输入相同的名称,那个时侯还能注册的,这点要注意。