前台页面：   对一张进行查询，删除，添加

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <script src="jquery.js"></script>
  7. </head>
  8. <body>
  9.     <span id="s1"></span>
  10.     <input type="button" id="gget" value="获取" />
  11.     <div id="tb"></div>
  12. </body>
  13. </html>
  14. <script>
  15.    //获取表
  16.     $("#gget").click(function () {
  17.         //把id为tb的Html清除
  18.         $("#tb").html("");
  19.         $("#s1").append('<img src="img/Loading2.gif" />');
  20.         //get方式传值
  21.         $.get("table.ashx", function (data) {
  22.             $("#s1").html("");
  23.             //把获取的字符串添加到tb中
  24.                 var dv = "<div>" + data + "</div>";
  25.                 $("#tb").append(dv);
  26.             });
  27.     });
  28.     //删除脚本
  29.     function dd(id) {
  30.         $("#tb").html("");
  31.         $("#s1").append('<img src="img/Loading2.gif" />');
  32.         //把你要删除的ID传过去做删除
  33.         $.get("table.ashx", { "id": id }, function (data) {
  34.                $("#s1").html("");
  35.                 var dv = "<div>" + data + "</div>";
  36.                 $("#tb").append(dv);
  37.           });
  38.         };
  39.      //添加脚本
  40.     function ff() {
  41.         //如果按钮为添加
  42.         if ($("#in").val() == "添加") {
  43.             //判断账号不为空
  44.             if ($("#name").val().trim()== "") {
  45.                 alert("账号不能为空");
  46.                 return;
  47.             }
  48.             else {
  49.                 //判断密码不为空
  50.                 if ($("#pwd").val().trim() == "") {
  51.                     alert("密码不能为空");
  52.                     return;
  53.                 }
  54.                     //密码账号不为空就做添加
  55.                 else {
  56.                     var name = $("#name").val();
  57.                     var pwd = $("#pwd").val();
  58.                     var sex = $("#sex").attr("checked");  //获取性别
  59.                     var admiID = $("#Admin").val();
  60.                     $.get("table.ashx", { "name": name, "pwd": pwd, "sex": sex, "adminID": admiID }, function (data) {
  61.                         $("#tb").html("");
  62.                         var dv = "<div>" + data + "</div>";
  63.                         $("#tb").append(dv);
  64.                     });
  65.                 }
  66.             }
  67.         }
  68.         //如果按钮为编辑
  69.         if ($("#in").val() == "编辑") {
  70.             //把按钮改为添加
  71.             $("#in").val("添加");
  72.             //激活控件
  73.             $("#name,#pwd,#sex,#Admin").removeAttr("disabled");
  74.         }
  75.  
  76.     }
  77. </script>

后台页面：   一般处理程序

  1. <%@ WebHandler Language="C#" Class="table" %>
  2.  
  3. using System;
  4. using System.Web;
  5. using DAL;
  6. using System.Data;
  7. using System.Data.SqlClient;
  8.  
  9. public class table : IHttpHandler {
  10.  
  11.     public void ProcessRequest (HttpContext context) {
  12.         context.Response.ContentType = "text/plain";
  13.         //如果ID不为空就是做删除
  14.         if (context.Request.QueryString["id"]!=null)
  15.         {
  16.             int id = int.Parse(context.Request.QueryString["id"].ToString());
  17.             int r = SQLHelper.ExecuteNonQuery("delete Users where ID=@0", CommandType.Text, id);
  18.             if (r>)
  19.             {
  20.                 Common(context);
  21.             }
  22.         }
  23.         else
  24.         {
  25.             //如果name不为空就做添加
  26.             if (context.Request.QueryString["name"]!=null)
  27.             {
  28.                 string name = context.Request.QueryString["name"].ToString();
  29.                 string pwd = context.Request.QueryString["pwd"].ToString();
  30.                 bool sex = bool.Parse(context.Request.QueryString["sex"].ToString());
  31.                 int adminID = int.Parse(context.Request.QueryString["adminID"].ToString());
  32.                 int i = SQLHelper.ExecuteNonQuery("insert into Users values(@0,@1,@2,@3)", CommandType.Text, name, pwd,adminID,sex );
  33.                 if (i>)
  34.                 {
  35.                     Common(context);
  36.                 }
  37.             }
  38.                 //都为空就是获取表
  39.             else
  40.             {
  41.                 Common(context);
  42.             }
  43.  
  44.         }
  45.  
  46.     }
  47.     public void Common(HttpContext context)
  48.     {
  49.         SqlDataReader dr = SQLHelper.ExecuteReader("select * from Users", CommandType.Text);
  50.         string newTable = "<table cellspacing='1' cellpadding='3' id='GridView1' style='background-color:White;border-color:White;border-width:2px;border-style:Ridge;'><tr style='color:#E7E7FF;background-color:#4A3C8C;font-weight:bold;'><th scope='col'>ID</th><th scope='col'>UserName</th><th scope='col'>Password</th><th scope='col'>Sex</th><th scope='col'>AdminID</th><th scope='col'>删除</th></tr>";
  51.         //加载  数据行的字符串
    　　　　 while (dr.Read())
  52.        　　 {
  53.           　　  string sex = "checked='checked'";
  54.             　　if (dr[].ToString().ToLower() == "false")
  55.                 sex = "";
  56.             　　newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td>" + dr[] + "</td><td>" + dr[] + "</td><td>" + dr[] + "</td><td><span class='aspNetDisabled'><input  type='checkbox'" + sex + " disabled='disabled'  /></span></td><td>" + dr[] + "</td>" +
  57.                　　 "<td><input type='button'   onclick='javascript:dd(" + dr[] + ")' value='删除' /></td></tr>";
  58.             //<a href='javascript:__doPostBack('GridView1','Delete$0')' style='color:Black;'></a>
  59.         　　}
  60.         dr.Close();
              //加载 添加行的字符串
  61.         newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td></td><td> <input type='text' id='name'"+
  62.             " disabled='disabled' /></td><td><input type='password' id='pwd' disabled='disabled' /></td><td><span "+
  63.             " class='aspNetDisabled'><input  type='checkbox' id='sex' disabled='disabled' /></span></td><td>"+
  64.             " <select id='Admin' disabled='disabled' >" +
  65.         "<option  value='1'>Admin</option>"+
  66.        " <option  value='2'>Guest</option>"+
  67.         "<option selected value='3'>User</option>" +
  68.         "</select></td>" + "<td><input type='button' id='in'  onclick='javascript:ff()' value='编辑' /></td></tr>";
  69.         newTable += "</table>";
          //一张完整的表的字符串
  70.         context.Response.Write(newTable);
  71.     }
  72.     public bool IsReusable {
  73.         get {
  74.             return false;
  75.         }
  76.     }
  77.  
  78. }

JQuery Ajax 获取数据的更多相关文章

  1. jquery通过ajax获取数据，控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  2. jquery.ajax和Ajax 获取数据

    前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在 在checkname_jqajax ...

  3. jquery ajax获取后台数据后无法输出

    今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...

  4. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

  5. select2 AJAX获取数据

    页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  6. jquery ajax提交数据给后端

    大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...

  7. node.js之用ajax获取数据和ejs获取数据

    摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...

  8. vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  9. 获取链接的参数，判断是否是微信打开，ajax获取数据

    //获取链接参数function GetQueryString(name) {    var reg = new RegExp("(^|&)" + name + " ...

随机推荐

  1. javascript定时器:setTimeout与setInterval

    概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...

  2. [原创作品] Express 4.x 接收表单数据

    好久没有写博客,从现在开始,将介绍用nodejs进行web开发的介绍.欢迎加群讨论:164858883. 之前的express版本在接收表单数据时,可以统一用res.params['参数名'],但在4 ...

  3. windows　删除多层文件夹

    眼下目录d:\clu_1下有99个目录,名字为0,1....99,每一个目录下又有25个目录,目录名为0,1,....24,其下其下又有以日期命名的目录(如20140521),最后是zip文件.如一个 ...

  4. 从点亮一个LED开始，Cortex-A9裸机程序设计

    电路原理图: 如何点亮一个LED? 通过对原理图进行分析,我们能够发现给三极管的基极加上一个高点平时,三级管be结导通构成通路,此时二极管就点亮了.若要将LED熄灭只需取消高电平输出. 如何使三级管基 ...

  5. (转) 值不能为空。参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explorer)

    打开MSSQL 2008 R2的时候,展开数据库都显示以下的错误提示: 值不能为空.参数名viewinfo(microsoft.sqlserver.management.sqlstudio.explo ...

  6. SQL Server Profile：使用方法和指标说明

    SQL Server Profiler的中文意思是SQL Server事件探查,一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接.感觉这个工具的作用还是很大的,给大家分享一 ...

  7. QTP描述性编程中往WebEdit控件输入文字问题

    在网上查找到许多相关的描述性编程的案例,自己就想动手一试,于是在专家视图中输入如下代码: systemUtil.Run "http://www.baidu.com" wait(15 ...

  8. C# 参数按照ASCII码从小到大排序（字典序）

    在对接第三方支付的时候,第三方会要求参数按照ASCII码从小到大排序.如下: public static void requestPay() { Dictionary<string, strin ...

  9. nodejs 简单http 文件上传demo

    // 这是一个简单的Node HTTP,能处理当前目录的文件 // 并能实现良种特殊的URL用于测试 // 用http://localhost:8000 或http://127.0.0.1:8000 ...

  10. javascript 概述及基础知识点（变量，常量，运算符，数据类型）

    JavaScript概述 1.1 什么是JavaScript: javaScript(简称js),是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.同时也是一种广泛用于客户端Web开发的脚本语 ...