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>0)
            {
                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>0)
                {
                    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[4].ToString().ToLower() == "false")
                sex = "";
            　　newTable += "<tr style='color:Black;background-color:#DEDFDE;'><td>" + dr[0] + "</td><td>" + dr[1] + "</td><td>" + dr[2] + "</td><td><span class='aspNetDisabled'><input  type='checkbox'" + sex + " disabled='disabled'  /></span></td><td>" + dr[3] + "</td>" +
               　　 "<td><input type='button'   onclick='javascript:dd(" + dr[0] + ")' value='删除' /></td></tr>";
            //<a href='javascript:__doPostBack(&#39;GridView1&#39;,&#39;Delete$0&#39;)' 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;
        }
    }

}

 

posted @ 2016-10-07 22:28  Sealee  阅读(479)  评论(0)  编辑  收藏  举报