本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
我们知道同步执行和异步执行的区别，为了更好的提高用户的体验，我们都会采用异步方式去处理一些问题，毕竟单线程的同步可能回造成卡死等现象，很不友好，所以可以使用ajax来完成用户的体验，现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容
我们只是单方面的获取内容，分页等就不考虑了，后期会讲到无刷新的分页
页面中我们放置一个Div容器用来存放返回的内容
<div id="comment">
<img src="data: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你第一次注册了一个名字，你不要做其他的操作，你再在文本框里面输入相同的名称，那个时侯还能注册的，这点要注意。
本篇文章主要是对jquery+ajax+C#实现无刷新操作数据库数据的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助的更多相关文章
- jQuery+AJAX实现网页无刷新上传
新年礼,提供简单.易套用的 jQuery AJAX上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- C#&JQuery非缓存式无刷新临时存储数据之仿购物车功能
感谢广大博问博友的帮助和共同研究讨论,终于实现了一个无缓存无刷新仿购物车的小功能: 一.实现效果简述: 有一种列表,是由双层Repeater嵌套,第一层用来显示类别,第二层用来显示类别下的商品数据, ...
- jQuery Ajax方法调用 Asp.Net WebService、WebMethod 的详细实例代码
将以下html存为ws.aspx <%@ Page Language="C#" AutoEventWireup="true" %> <scri ...
- asp.netajax与jquery和bootstrap的无刷新完美实现
20190421asp.netajax与jquery和bootstrap的无刷新完美实现 设计代码和后台代码中重要部分加粗和深色以及字号加大. 设计前台代码: <%@ Page Title=&q ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- ajax完成list无刷新返回
ajax完成list无刷新返回 ajax无刷新技术总结,以下是一段我写的ajax应用的js脚本.其中提交的data刚开始我采用的是$('#formId').serialize();但是出现乱码问题,为 ...
- JSF中使用f:ajax标签无刷新页面改变数据
ajax本是用在前端的一种异步请求数据的操作,广泛用于js中,一般的js框架如jq都有被封装好的方法,用于发起异步请求操作.异步操作可以增强用户体验和操作,越来越多的程序都在使用ajax.JSF的fa ...
随机推荐
- java面试题及答案（基础题122道，代码题19道）
JAVA相关基础知识 1.面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分, ...
- 安装 mysql
1.安装mysql客户端 yum install mysql 2.安装mysql 服务器端 yum install mysql-server 3.配置 mysql字符集 /etc/my.cnf 加入 ...
- REST简介及设计原则
rest,即REST(Representational State Transfer表述性状态转移)是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可伸缩性. 简介 REST (R ...
- saas系统架构经验总结
2B Saas系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk Saas系统.很多Saas创业公司也拿了大额风投.毕竟Saas相对传统软件的优势非常明显. ...
- sql如何向一个表中批量插入大量数据
--如果是一个表插入另外一个表.insert into tb1 需要的列名 select 按照前面写上需要的列名 from tb2 --如果两表结构一样.insert into tb1 * selec ...
- 2-16 HDO1106
这题寒假也没搞出来,但今天花了一小时终于搞定. 题意是输入一串数字字符,把‘5’当作空格,然后把被分割开的数字进行排序输出. 首先是字符串输入,按照高精度的处理方法,数值低位放到数组低位.(字符串型的 ...
- Mifare 0简介
Mifare UltraLight又称为MF0,从UltraLight(超轻的)这个名字就可以看出来,它是一个低成本.小容量的卡片.低成本,是指它是目前市场中价格最低的遵守ISO14443A协议的芯片 ...
- c语言之函数指针
一.基础研究 这里研究的内容是函数指针,需要我们在研究后构造程序来描述函数指针数组的用法和向函数传函数指针的方法. 指针有很多种:整型指针.结构体指针.数组指针等等,它们的本质是它们的值都是一个地址, ...
- h.264 FMO
在H.264之前的标准中,比如H.263,其比特流中的数据是按照一个宏块接一个宏块的方式排列的,一旦发生丢包,很多相邻宏块信息都会丢失,很难进行错误隐藏处理.在H.264中加入了一项新特性:把宏块在比 ...
- android手机游戏开发Cocos2d-x开发分享
我想现在应该没有人没有玩过手机游戏了吧,当然所有人都玩过,但不是所有人都知道怎么去开发手机游戏,因为许多人都感觉做开发是一件很困难的事儿,身边的朋友也对此感觉难度很大.但是,现在我可以告诉你,手机游戏 ...