您好,欢迎访问一九零五行业门户网

jquery+ajax+C#实现无刷新操作数据库数据的简单实例_jquery

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用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你第一次注册了一个名字,你不要做其他的操作,你再在文本框里面输入相同的名称,那个时侯还能注册的,这点要注意。
其它类似信息

推荐信息