当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使...

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用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:指向的url

type:提交的方式,可以为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如何加载

代码

代码如下:



   
   
   
 $(function () {
     $("#btnLoad").click(function () {
  $("#content").load("doAction.aspx",{fig:"reader",id:"1",page:"1"},function (responseText, textStatus, XMLHttpRequest) {
      alert(responseText);
  });
     })
 })
   


   
   
   

   


   



这样就把内容加载到页面里了,有一点问题就是发现页面中返回的内容和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("alert('评论发表成功!");
     }
 }

ajax里的属性很多,可以查看api,根据自己的需要调用不同的属性就可以了,这里面有一点需要注意的是

如果判断用户名是否有重复的时候,要使用$.getIfModified而不能是用$.get,大家可以测试一下

如果使用$.get你第一次注册了一个名字,你不要做其他的操作,你再在文本框里面输入相同的名称,那个时侯还能注册的,这点要注意。


    
 
 

您可能感兴趣的文章:

  • 使用jquery局部刷新(jquery.load)从数据库取出数据
  • jQuery 数据表格插件 jqxGrid
  • jquery转化Datatable为json数据的例子
  • jQuery数据延迟加载插件 DataLazyLoad
  • jQuery 表格数据渲染插件 GraphUp
  • jQuery数据存储插件 jStore
  • JQuery中使用ajax传输超大数据的解决方法
  • jQuery 数据网格库 Sensei Grid
  • 技术文章 iis7站长之家
  • jquery Ajax 实现加载数据前动画效果的示例代码
  • jquery如何判断表格同一列不同行input数据是否重复
  • Jquery 数据异步提交的小例子
  • jquery教程ajax请求json数据示例
  • jquery getJSON跨域调用数据的例子
  • jQuery选择不包含某个ID数据的方法
  • jquery easyui中combox数据获取实例
  • jquery清空表单数据示例分享
  • JQuery获取表格数据示例代码
  • jquery解析多维Json格式数据的例子
  • jQuery异步加载数据并添加事件示例
  • jquery使用jquery.zclip插件复制对象的实例教程
  • JQuery验证特殊字符实例
  • jquery检验实例-改变错误提示信息的位置
  • textarea显示成label的样式 jquery实例
  • jQuery实现回车键(Enter)切换文本框焦点的代码实例
  • jquery修改属性值实例代码(设置属性值)
  • Jquery each方法跳出循环,并获取返回值(实例讲解)
  • jquery等宽输出文字插件的实例代码
  • jquery 回车事件的实例分享
  • jquery 获取dom固定元素 添加样式的简单实例
  • Jquery 获取元素位置序号的实例代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery刷新页面 jquery局部刷新与及全页面刷新
  • Jquery更换主题同时刷新iframe页面的代码举例
  • jquery刷新aspx中iframe的src的代码
  • jQuery 定时局部刷新(setInterval)方法总结
  • Jquery 定时局部刷新的代码举例
  • jquery禁用右键单击功能屏蔽F5刷新
  • jquery在firefox中刷新iframe页面,提示重复之前动作的解决方法
  • jquery ajax 局部刷新小案例
  • Jquery 随机刷新页面背景图片
  • jquery刷新页面代码及js常用函数汇总
  • 页面刷新时记住滚动条的位置jquery代码
  • Jquery实现无闪烁定时刷新的代码
  • Jquery、Ajax、Struts2定时刷新功能的实现代码
  • Jquery 无刷新提交表单的实例代码
  • Jquery、Ajax、Struts2完成定时刷新的方法
  • jquery捕获超链接事件并局部刷新的代码一例
  • jquery 局部刷新(jsp环境)
  • jquery ajax 无刷新提交数据与无刷新登录的例子
  • jquery控制自动刷新的代码举例
  • Jquery.load载入页面实现局部刷新的代码
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3