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

我们知道同步执行和异步执行的区别，为了更好的提高用户的体验，我们都会采用异步方式去处理一些问题，毕竟单线程的同步可能回造成卡死等现象，很不友好，所以可以使用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你第一次注册了一个名字，你不要做其他的操作，你再在文本框里面输入相同的名称，那个时侯还能注册的，这点要注意。

赞 (0)

相关推荐

  • Ajax动态加载数据库示例

    复制代码 代码如下: <!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> <title></title

  • 通过数据库和ajax方法写出地图的实例代码

    通过数据库和ajax方法写出地图的实例代码

    ajax教程 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 客户端部分:html.js.css代码部分: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www

  • AJAX验证数据库内容并将值显示在页面

    功能实现: 在jsp页面中填写文本框内容,光标离开文本框,在本页面的相应地方获取数据库中改值所对应的其他数据. servlet: request.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); // 调用servlet层去数据库查找是否有相同用户名 并返回到页面中的其他记录 String client_id = request.getParameter("client_id"

  • ajax读取数据库内容实现二级联动下拉选择菜单示例

    复制代码 代码如下: <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">---------------------这是ajax(javascript)代码---------------------------</PRE><PRE class=javascript name="code">&l

  • AJAX 自学练习 无刷新提交并修改数据库数据并显示

    request.jsp页面中有rocarsId,和ccrn两个text. 对应在数据库中表格 rocars表的msg_id,ccrn两个字段.现在要实现在界面上修改ccrn的值,ajax提交到response.jsp页面,并调用RocarsEntiy.updateCcrn方法更新对应的ccrn,最后无刷新显示 代码: request.jsp 复制代码 代码如下: <%@ page language="java" contentType="text/html; chars

  • ajax异步刷新实现更新数据库

    ajax异步刷新实现更新数据库

    上篇文章都是关于界面的东西,下面写关于如何把无刷新的把数据写入到数据库中. 当我们改变某一个人或某几个人的某项分值实现无刷新写入数据库. 首先,我们需要声明XMLHttpRequest对象 复制代码 代码如下: //声明XMLHttpRequest对象 var xmlHttp; function createXMLHTTP() { if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //Mozilla浏览器 } else if

  • ajax对注册名进行验证检测是否存在于数据库中

    这个是我在网上看到的一个有错的ajax 我改正确了,却找不到那个帖子了. 用servlet验证: 复制代码 代码如下: package Servlet; import java.io.*; import java.sql.*; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.*; import javax.servlet.http.HttpServletRequest; import jav

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

    我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"><img src="images/Wait.gif&quo

  • Ajax的jsonp方式跨域获取数据的简单实例

    jsonp的调用,今天碰到了,正好整理了一下. <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b

  • jQuery+AJAX实现网页无刷新上传

    jQuery+AJAX实现网页无刷新上传

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 (不论是否 ASP.NET),内附的 FileUpload 控件,功能不足 (页面必须刷新.不支援 AJAX),或外观太丑被用户嫌弃 (却无法透过 CSS 自定义外观).网路上虽已有许多可用的示例,如: jQuery File Upload,但功能太强大.外观复杂,欲仅取出部分功能来引用,反而不易

  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJson.aspx.cs" Inherits="AjaxJson" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • AJAX自学练习 无刷新从数据库后台取数据显示

    请求页面request.jsp 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3

  • Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

    复制代码 代码如下: /**//// <summary> /// 生成带CDATA的节点 /// </summary> /// <param name="xDocument">XmlDocument</param> /// <param name="elementName">元素名称</param> /// <param name="cdataValue">CDA

  • Jquery基于Ajax方法自定义无刷新提交表单Form实例

    本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码 代码如下: <form id="Form1" action="action.aspx" method="pos

  • PHP+jQuery实现滚屏无刷新动态加载数据功能详解

    本文实例讲述了PHP+jQuery实现滚屏无刷新动态加载数据功能.分享给大家供大家参考,具体如下: index.php <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • 实例代码讲解ajax实现的无刷新分页

    1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)?还是静态页面(.html/.htm/.shtml)?答案是:静态页面: 3.实现原理:通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据,并显示. 现在什么都讲究一个无刷新,就连分页也是如此,下面是小编日常整理的关于一段无刷新代码,希望能够帮到大家. 代码如下: 一.html代码部分

  • PHP Ajax实现页面无刷新发表评论

    PHP Ajax实现页面无刷新发表评论

    大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助. 那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下: var http_request=false;  function send_request(url){//初始化,指定处理函数,发送请求的函数    http_request

随机推荐