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 $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
js判断上传文件类型判断FileUpload文件类型代码
May 20 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
vue.js使用3DES加密的方法示例
May 18 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php简单的会话类代码
2011/08/08 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
js实现3D旋转相册
2020/08/02 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
python ubplot使用方法解析
2020/01/10 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
党性教育心得体会
2014/09/03 职场文书