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


Posted in Javascript onFebruary 08, 2014

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

我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页

页面中我们放置一个Div容器用来存放返回的内容

<div id="comment">
<img src="images/Wait.gif" title="数据载入中..." /></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如何加载

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 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("<script>alert('评论发表成功!</script>");
     }
 }

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

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

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

Javascript 相关文章推荐
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 #Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 #Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 #Javascript
jquery ajax 局部刷新小案例
Feb 08 #Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 #Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 #Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python实现textrank关键词提取
2018/06/22 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
实例介绍Python中整型
2019/02/11 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
Python urllib.request对象案例解析
2020/05/11 Python
浅析Python迭代器的高级用法
2020/07/16 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
python时间time模块处理大全
2020/10/25 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
J2EE相关知识面试题
2013/08/26 面试题
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书