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

163 阅读 0 评论 108 点赞

我是靠谱客的博主炙热大山，最近开发中收集的这篇文章主要介绍jquery+ajax+C#实现无刷新操作数据库数据的简单实例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

页面中我们放置一个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代码贴出来看看

复制代码代码如下:

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你第一次注册了一个名字，你不要做其他的操作，你再在文本框里面输入相同的名称，那个时侯还能注册的，这点要注意。