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

随机推荐

AngularJs学习笔记1——入门知识
1.什么是AngularJs AngularJs 诞生于2009年,由Misko Hevery 等人创建,后被Google收购,是一个优秀的Js框架,用于SPA(single pag ...
jQuery的ajax jsonp跨域请求
了解:ajax.json.jsonp.“跨域”的关系要弄清楚以上ajax.json.jsonp概念的关系,我觉得弄清楚ajax是“干什么的”,“怎么实现的”,“有什么问题”,“如果解决存在的问题”等 ...
IP转发和子网路由
IP地址的分类在TCP/IP协议中,协议栈分为4层.从上到下依次是应用层.运输层.网络层.网络接口层. IP协议就工作在网络层.IP协议将纷繁复杂的物理层协议屏蔽掉,对上层提供统一的描述和管理服务. ...
Test failed.尝试加载Oracle客户端库时引发BadImageFormatException
CodeSmith6.5不像前几个版本,需要用户手动添加oracle驱动,内部已经集成了oracle的驱动. 网上遇到很多win7 64位机子使用CodeSmith连接oracle的时候出现错误如下:
WPF DataGrid 之数据绑定--实例2
1.前台Grid定义  <DataGrid Grid.Row="1" Name="gridOne" Margin=&qu ...
SDK文件夹下内容介绍
Platform-Tools: 这是 adb, fastboot 等工具包.把解压出来的 platform-tools 文件夹放在 android sdk 根目录下,并把 adb所在的目录添加到系统 ...
JavaScript优化参考
最近在为管理系统的网站做点优化,压缩都用了工具,就没太多可以讨论的. 主要还是代码上的精简和优化.稍微整理一下,顺便做点测试. 这里先贴上项目中用来替代iFrame的Ajax处理的局部代码,本人比较讨 ...
Shiro 权限框架使用总结
我们首先了解下什么是shiro ,Shiro 是 JAVA 世界中新近出现的权限框架,较之 JAAS 和 Spring Security,Shiro 在保持强大功能的同时,还在简单性和灵活性方面拥有巨 ...
C++ 虚函数详解
C++ 虚函数详解这篇文章主要是转载的http://blog.csdn.net/haoel/article/details/1948051这篇文章,其中又加入了自己的理解和难点以及疑问的解决过程,对 ...
linux下查找文件和文件内容
find /xxx -name "*" | xargs grep "某内容" /xxx表示路径,"*"表示在含有某关键字名字下的文件中查找, ...

JQuery Ajax 获取数据

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

随机推荐

热门专题