jquery+ajax+C#实现无刷新操作数据库数据的简单实例
我们知道同步执行和异步执行的区别，为了更好的提高用户的体验，我们都会采用异步方式去处理一些问题，毕竟单线程的同步可能回造成卡死等现象，很不友好，所以可以使用ajax来完成用户的体验，现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容
我们只是单方面的获取内容，分页等就不考虑了，后期会讲到无刷新的分页
页面中我们放置一个div容器用来存放返回的内容
<p id="comment">
<img src="images/wait.gif" title="数据载入中..." /></p>
注：wait.gif是一个类似进度条的效果，当没有加载的内容没有加载出来的时候，就显示这个效果，这样就能提高用户的体验度。然后最重要的就是jquery这块了，需要用到ajax来完成
代码：
. 代码如下:
function getinfo()
{
$.ajax({
url:"doaction.x?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" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="https://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" />
<p id="content">
</p>
</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") {
nbsp; 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你第一次注册了一个名字，你不要做其他的操作，你再在文本框里面输入相同的名称，那个时侯还能注册的，这点要注意。
上一篇： 预防心悸到底有哪些方法
下一篇： 酸奶喝错时间会怎么样？,当心营养物变毒品