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 相关文章推荐
Javascript中For In语句用法实例
May 14 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
js制作支付倒计时页面
Oct 21 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
图片按比例缩放函数
2006/06/26 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
python环形单链表的约瑟夫问题详解
2018/09/27 Python
Python递归函数实例讲解
2019/02/27 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
详解pandas绘制矩阵散点图(scatter_matrix)的方法
2020/04/23 Python
用python实现名片管理系统
2020/06/18 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
平面设计师工作职责范文
2013/12/03 职场文书
运动会广播稿400字
2014/01/25 职场文书
生日宴会主持词
2014/03/20 职场文书
安全生产责任书范本
2014/04/15 职场文书
优秀护士先进事迹
2014/05/08 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle