我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容
我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页
页面中我们放置一个div容器用来存放返回的内容
注:wait.gif是一个类似进度条的效果,当没有加载的内容没有加载出来的时候,就显示这个效果,这样就能提高用户的体验度。然后最重要的就是jquery这块了,需要用到ajax来完成
代码:
复制代码 代码如下:
function getinfo()
{
$.ajax({
url:doaction.aspx?fig=reader&id=1&page=1,
type:post,
success:function(data)
{
$(#comment).html(data);
//通过arguments[0]接收也可以 $(#comment).html(arguments[0]);
},
error:function()
{
alert(程序出错);
}
})
}
url:指向的urltype:提交的方式,可以为post或者get
success:通信成功后执行的函数
error:通信失败后执行的函数
beforesend:通信前执行的韩硕
complete:通信完成后执行的函数
在这里采用了post提交的方式,比get更安全些,所以也可以替换成下面的方式
复制代码 代码如下:
function getinfo1() {
$.post(doaction.aspx, { fig: reader, id:1, page:1 }, function () {
$(#comment).html(arguments[0]);
})
}
可以看到参数的写法不同,采用post提交方式,第一种方式和第二种方式区别在于:首先,接收参数的时候,在doaction.aspx页面里第一种方式使用request.querystring[fig]接收,第二种方式使用的是request.form[fig]
其次,第一种方式当通信失败后,可以友好的返回错误信息,第二种方式暂时没发现可以返回
然后在doaction.aspx页面中,只要进行相应的处理就可以了
复制代码 代码如下:
if (request.form[fig] != null && request.form[fig].tostring() == reader)
{
ajax_getcomment(1,1);
}
//从数据库中获取数据
private void ajax_getcomment(string id, int page)
{ using (commentbo cm = new commentbo(id, page - 1))
{
response.write(cm.getcommentcontent());
}
}
同样如果才用get的提交方式,使用$.get(,{},function(){})也是一样的..另外一种加载内容的方式可以使load()方法,关于用法可以查阅api,简单说说上面的用load如何加载
代码
复制代码 代码如下:
这样就把内容加载到页面里了,有一点问题就是发现页面中返回的内容和alert弹出的有些不一样,alert弹出的返回html标签,而页面没有,那是因为页面已经解析了html代码其他的添加,修改,删除等基本操作也是如此,大同小异,只是在doaction.aspx页面中调用不同的方法而已,下面把主要的jquery代码贴出来看看
复制代码 代码如下:
function addpinlun()
{
var $commentparentid =arguments[0];
var $commentuser =$('#commentuser').val();
var $commenttext =$('#commenttext').val();
var $commentvalidate =$('#commentvalidate').val();
if($.trim($commentuser)=='')
{
alert(请填写昵称!);
$(#commentuser).focus();
return false;
}
if($.trim($commenttext)=='')
{
alert(请填写评论内容!);
$(#commenttext).focus();
return false;
}
if($.trim($commentvalidate)=='')
{
alert(请输入验证码);
$(#commentvalidate).focus();
return false;
}
stopbutton('commentsubmit',10);
// 验证完成可以ajax添加
$.ajax({
url: doaction.aspx?action=add&commentparentid= + $commentparentid + &commentuser= + escape($commentuser) + &commenttext= + escape($commenttext) + &commentvalidate= + escape($commentvalidate) + &time= + new date().tostring(),
type: get,
success: function (data) {
if (arguments[0] == error) {
alert(验证码超时,请重新输入);
}
else {
getinfo();
$(#commenttext).val();
//验证成功时,刷新验证码图片
$(#commentvalidateimages).attr(src, verifycode.aspx?s= + math.random());
// alert(添加成功);
$(#alertmessgae).html(data);
}
$('#commentvalidate').val();
}
})
} 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页面的部分代码页贴出来
复制代码 代码如下:
if(request.querystring[action]!=null && request.querystring[action]==add)
{
if (session[verifycode].tostring().tolower() != commentvalidate.tolower())
{
response.write(error);
}
else
{
dbquery.executescalar(insert into comment(commentparentid,commentuser,commenttext,commentreply,commentip) values(' + commentparentid + ',' + commentuser + ',' + server.htmlencode(commenttext) + ','',' + request.servervariables[remote_addr] + '));
response.write();
}
}
ajax里的属性很多,可以查看api,根据自己的需要调用不同的属性就可以了,这里面有一点需要注意的是如果判断用户名是否有重复的时候,要使用$.getifmodified而不能是用$.get,大家可以测试一下
如果使用$.get你第一次注册了一个名字,你不要做其他的操作,你再在文本框里面输入相同的名称,那个时侯还能注册的,这点要注意。