JQuery Ajax 获取数据

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="jquery.js"></script>

</head>

<body>

    <span id="s1"></span>

    <input type="button" id="gget" value="获取" />

    <div id="tb"></div>

</body>

</html>

<script>

   //获取表

    $("#gget").click(function () {

        //把id为tb的Html清除

        $("#tb").html("");

        $("#s1").append('<img src="img/Loading2.gif" />');

        //get方式传值

        $.get("table.ashx", function (data) {

            $("#s1").html("");

            //把获取的字符串添加到tb中

                var dv = "<div>" + data + "</div>";

                $("#tb").append(dv);

            });

    });

    //删除脚本

    function dd(id) {

        $("#tb").html("");

        $("#s1").append('<img src="img/Loading2.gif" />');

        //把你要删除的ID传过去做删除

        $.get("table.ashx", { "id": id }, function (data) {

               $("#s1").html("");

                var dv = "<div>" + data + "</div>";

                $("#tb").append(dv);

          });

        };

     //添加脚本

    function ff() {

        //如果按钮为添加

        if ($("#in").val() == "添加") {

            //判断账号不为空

            if ($("#name").val().trim()== "") {

                alert("账号不能为空");

                return;

            }

            else {

                //判断密码不为空

                if ($("#pwd").val().trim() == "") {

                    alert("密码不能为空");

                    return;

                }

                    //密码账号不为空就做添加

                else {

                    var name = $("#name").val();

                    var pwd = $("#pwd").val();

                    var sex = $("#sex").attr("checked");  //获取性别

                    var admiID = $("#Admin").val();

                    $.get("table.ashx", { "name": name, "pwd": pwd, "sex": sex, "adminID": admiID }, function (data) {

                        $("#tb").html("");

                        var dv = "<div>" + data + "</div>";

                        $("#tb").append(dv);

                    });

                }

            }

        }

        //如果按钮为编辑

        if ($("#in").val() == "编辑") {

            //把按钮改为添加

            $("#in").val("添加");

            //激活控件

            $("#name,#pwd,#sex,#Admin").removeAttr("disabled");

        }

    }

</script>

后台页面：一般处理程序

<%@ WebHandler Language="C#" Class="table" %>

using System;

using System.Web;

using DAL;

using System.Data;

using System.Data.SqlClient;

public class table : IHttpHandler {

    public void ProcessRequest (HttpContext context) {

        context.Response.ContentType = "text/plain";

        //如果ID不为空就是做删除

        if (context.Request.QueryString["id"]!=null)

        {

            int id = int.Parse(context.Request.QueryString["id"].ToString());

            int r = SQLHelper.ExecuteNonQuery("delete Users where ID=@0", CommandType.Text, id);

            if (r>)

            {

                Common(context);

            }

        }

        else

        {

            //如果name不为空就做添加

            if (context.Request.QueryString["name"]!=null)

            {

                string name = context.Request.QueryString["name"].ToString();

                string pwd = context.Request.QueryString["pwd"].ToString();

                bool sex = bool.Parse(context.Request.QueryString["sex"].ToString());

                int adminID = int.Parse(context.Request.QueryString["adminID"].ToString());

                int i = SQLHelper.ExecuteNonQuery("insert into Users values(@0,@1,@2,@3)", CommandType.Text, name, pwd,adminID,sex );

                if (i>)

                {

                    Common(context);

                }

            }

                //都为空就是获取表

            else

            {

                Common(context);

            }

        }

    }

    public void Common(HttpContext context)

    {

        SqlDataReader dr = SQLHelper.ExecuteReader("select * from Users", CommandType.Text);

        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>";

        //加载  数据行的字符串
　　　　 while (dr.Read())

       　　 {

          　　  string sex = "checked='checked'";

            　　if (dr[].ToString().ToLower() == "false")

                sex = "";

            　　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>" +

               　　 "<td><input type='button'   onclick='javascript:dd(" + dr[] + ")' value='删除' /></td></tr>";

            //<a href='javascript:__doPostBack('GridView1','Delete$0')' style='color:Black;'></a>

        　　}

        dr.Close();
          //加载 添加行的字符串

        newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td></td><td> <input type='text' id='name'"+

            " disabled='disabled' /></td><td><input type='password' id='pwd' disabled='disabled' /></td><td><span "+

            " class='aspNetDisabled'><input  type='checkbox' id='sex' disabled='disabled' /></span></td><td>"+

            " <select id='Admin' disabled='disabled' >" +

        "<option  value='1'>Admin</option>"+

       " <option  value='2'>Guest</option>"+

        "<option selected value='3'>User</option>" +

        "</select></td>" + "<td><input type='button' id='in'  onclick='javascript:ff()' value='编辑' /></td></tr>";

        newTable += "</table>";
      //一张完整的表的字符串

        context.Response.Write(newTable);

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

}

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

jquery通过ajax获取数据，控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
jquery.ajax和Ajax 获取数据
前几天接触了jquery 看到里面ajax的部分,自己也不是很懂,然后有重复看了即便,然后写了一个小功能,分享下...我刚学的.有错误的请指教. 验证用户名是否存在在checkname_jqajax ...
jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
select2 AJAX获取数据
页面效果: index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
jquery ajax提交数据给后端
大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学. 初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩.而JavaScript aj ...
node.js之用ajax获取数据和ejs获取数据
摘要:学了node之后有时候分不清前台和后台,今天用ajax和ejs来从后台获取数据,没有数据库,用json数据来进行模拟数据库:来区分前台和后台需要干什么? 一.用ejs获取数据 1.文件目录 2. ...
vue ajax获取数据的时候，如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全点击提交,发送请求.但是api ...
获取链接的参数，判断是否是微信打开，ajax获取数据
//获取链接参数function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + " ...

随机推荐

editplus批量删除html代码空行
在editplus替换菜单功能里,“查找”功能里输入: ^[ \t]*\n 替换为空,然后“全部替换”即可. 替换时,要选择“正则表达式”选项, 详细:http://www.dedecms8.com/ ...
python高级编程：有用的设计模式2
# -*- coding: utf-8 -*- __author__ = 'Administrator' #python高级编程:有用的设计模式 #代理 """ 代理对一 ...
Web Service工作原理
Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的 ...
通过BulkLoad的方式快速导入海量数据
摘要加载数据到HBase的方式有多种,通过HBase API导入或命令行导入或使用第三方(如sqoop)来导入或使用MR来批量导入(耗费磁盘I/O,容易在导入的过程使节点宕机),但是这些方式不是慢就 ...
深入浅出理解iOS经常使用的正則表達式—基础篇[Foundation]
參考资料:cocoachina的zys475481075的文章几个单词 Regular ['regjʊlə]adj. 定期的:有规律的 Expression[ɪk'spreʃ(ə)n; ek-] n ...
Citrix 服务器虚拟化之十 Xenserver高可用性HA
Citrix 服务器虚拟化之十 Xenserver高可用性HA HA是一套全自动功能设计,规划.它可以安全地恢复出现问题的XenServe 主机.例如物理破坏网络或主机的硬件故障,HA可确保无需任何人 ...
BGP
http://network.51cto.com/art/200912/172439.htm http://blog.sina.com.cn/s/blog_b457dde80101cyqr.html ...
XML基本知识
一.xml简介 1.xml(可扩展标记语言),是一种标记语言,类似于html,其作用主要是传输数据,并非显示数据! 2.xml标签没有被预定义需要用户自行定义. 3.xml由w3c组织发布,遵循200 ...
OOM总结
本文主要信息是来自互联网,我只是自己做了一点总结和摘要. OOM发生的原因简单的说通过不同的内存分配方式对不同的对象进行操作,会因为android系统版本的差异而产生不同的行为.主要是2.0和4.0 ...
HTML5画布（圆形）
案例1: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...

JQuery Ajax 获取数据

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

随机推荐

热门专题