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 获取数据

相关文章