2017-6-8 小型基础人员管理系统（增删改查） ajax版

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/tc.js"></script>
    <title></title>
</head>
<body>
    <input  type="button" value="加载数据" id="btn1"/>
    <input  type="button" value="添加用户" id="btn2"/>
    <input type="button" value="修改" id="btn3" />
    <input type="button" value="删除" id="btn4" />
    <table id="tb1" style="width:100%; text-align:center;background-color:navy;"  >
        <thead>
            <tr style="color:white;">
                <td>选择</td>  
                <td>用户名</td>
                 <td>密码</td>
                 <td>昵称</td>
                 <td>性别</td>
                 <td>生日</td>
                 <td>民族</td>
               
            </tr>
        </thead>
        <tbody id="tbody1">
           

        </tbody>

    </table>
</body>
</html>
<script type="text/javascript">
    $("#btn1").click(function () {
        f5();
    //$.ajax({
    //    url: "Handler2.ashx",
    //    data: {},
    //    type: "post",
    //    dataType: "json",
    //    async:false,
    //    success: function (msg) {
    //        $("#tbody1").html("");
    //        //alert(msg.length);
    //        for (var i = 0; i < msg.length; i++)
    //        {
    //            var str = "  <tr style=\"background-color:white;\">"
    //            str += "<td><input  type=\"checkbox\" value=\""+msg[i].ids+"\" class=\"check\"/></td>";
    //            str+=" <td>"+msg[i].username+"</td>";
    //            str+=" <td>"+msg[i].password+"</td>";
    //            str+="<td>"+msg[i].nickname+"</td>";
    //            str+="<td>"+msg[i].sex+"</td>";
    //            str+="<td>"+msg[i].birthday+"</td>";
    //            str += "<td>" + msg[i].nation + "</td>";
    //            str += " </tr>";
    //            $("#tbody1").append(str);
    //        }
    //    },
    //    error: function () {
    //        alert("err");
    //    },
    //    beforeSend: function ()
    //    {
    //        $("#btn1").attr("disabled", "disabled");
    //        $("#btn1").val("加载中......");
    //    },
    //    complete: function ()
    //        $("#btn1").removeAttr("disabled");
    //    {
    //        $("#btn1").val("加载数据");
    //    }

    //});
    });
    $("#btn2").click(function () {

        var title = "添加新用户";
        var content="用户名：<input type=\"text\" id=\"t1\" /><span id=\"txt1_msg\"></span><br/>";
        content += "密码：<input type=\"text\" id=\"t2\" /><br/>";
        content += "昵称：<input type=\"text\" id=\"t3\" /><br/>";
        content += "性别：<input type=\"text\" id=\"t4\" /><br/>";
        content += "生日：<input type=\"text\" id=\"t5\" /><br/>";
        content += "民族：<input type=\"text\" id=\"t6\" /><br/>";
        //var tj = "<input type=\"button\" id=\"btn1\" value=\"确认添加\"/>";
        myalert(title, content);


    });

    $("#btn3").click(function () {
        var title = "修改用户";
        var content = "用户名：<input type=\"text\" id=\"t1\" disabled=\"disabled\"  /><span id=\"txt1_msg\"></span><br/>";
        content += "密码：<input type=\"text\" id=\"t2\" /><br/>";
        content += "昵称：<input type=\"text\" id=\"t3\" /><br/>";
        content += "性别：<input type=\"text\" id=\"t4\" /><br/>";
        content += "生日：<input type=\"text\" id=\"t5\" /><br/>";
        content += "民族：<input type=\"text\" id=\"t6\" /><br/>";
        myalert(title,content);
        
    });

    $("#btn4").click(function () {
        //取出选中的ids
        var count = $(".check").length;
        var ss = "";
        var c = 0;
        for (var i = 0; i < count; i++) {
            if ($(".check")[i].checked) {
                
                if (c > 0) {
                    ss += ",";
                }
                ss += $(".check")[i].value;
                c++;
            }
        }
        //ajax传递数据
        $.ajax({

            url: "delete.ashx",
            data: { "ids":ss  },
            type: "post",
            dataType: "json",
            async: false,
            success: function (msg) {
                alert("删除成功！！");
               
            },
            error: function () { alert("删除失败！！"); }

        });
        f5();
    });

    
</script>

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;
public class Handler2 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context)
    {
        System.Threading.Thread.Sleep(1000);
        StringBuilder str = new StringBuilder();
        str.Append("[");
using(DataClassesDataContext con=new DataClassesDataContext())
{
    List<user1> ulist = con.user1.ToList();
    int count = 0;
    foreach(user1 u in ulist)
    {
        if (count > 0) { str.Append(","); }
        str.Append("{\"ids\":\""+u.ids+"\",\"username\":\"" + u.username + "\",\"password\":\"" + u.password + "\",\"nickname\":\"" + u.nickname + "\",\"sex\":\"" + u.sex + "\",\"birthday\":\"" + u.birthday + "\",\"nation\":\"" + u.nation + "\"}");
        count++;
    }
    
}
str.Append("]");

        context.Response.Write(str);
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

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

using System;
using System.Web;

public class insert : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {

        //string end = "{\"has\":\"false\"}";
        string uname = context.Request["uname"];
        string p = context.Request["password"];
        string ni = context.Request["nickname"];
        string s = context.Request["sex"];
        string b = context.Request["birthday"];
        string n = context.Request["nation"];
        using (DataClassesDataContext con = new DataClassesDataContext())
        {
            user1 uu=new user1();
            uu.username=uname;
            uu.password=p;
           uu.nickname=ni;
            //uu.sex=Convert.ToBoolean(s);
            //uu.birthday= Convert.ToDateTime(b);
            uu.nation=n;
           
            //if (uu != null)
            //{
            //    end = "{\"has\":\"true\"}";
            //}

            con.user1.InsertOnSubmit(uu);
            con.SubmitChanges();
        }
       
        
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;
public class update : IHttpHandler 
{
    
    public void ProcessRequest (HttpContext context)
    {
       
        string ids=context.Request["ids"];
        
        using(DataClassesDataContext con=new DataClassesDataContext())
        {
            user1 u = con.user1.Where(r => r.ids==Convert.ToInt32(ids)).FirstOrDefault();
            if(u!=null)
            {
                u.password = context.Request["password"];
                u.nickname = context.Request["nickname"];
                u.sex = Convert.ToBoolean(context.Request["sex"]);
                u.birthday = Convert.ToDateTime(context.Request["birthday"]);
                u.nation = context.Request["nation"];
            con.SubmitChanges();
        }
            }
        }
    
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;
public class update : IHttpHandler 
{
    
    public void ProcessRequest (HttpContext context)
    {
       
        string ids=context.Request["ids"];
        
        using(DataClassesDataContext con=new DataClassesDataContext())
        {
            user1 u = con.user1.Where(r => r.ids==Convert.ToInt32(ids)).FirstOrDefault();
            if(u!=null)
            {
                u.password = context.Request["password"];
                u.nickname = context.Request["nickname"];
                u.sex = Convert.ToBoolean(context.Request["sex"]);
                u.birthday = Convert.ToDateTime(context.Request["birthday"]);
                u.nation = context.Request["nation"];
            con.SubmitChanges();
        }
            }
        }
    
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;
public class delete : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string id=context.Request["ids"];
        using (DataClassesDataContext con=new DataClassesDataContext())
        {
            user1 us = con.user1.Where(r => r.ids.ToString() == id).FirstOrDefault();
            if (us != null)
            {
                con.user1.DeleteOnSubmit(us);
                con.SubmitChanges();
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

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

using System;
using System.Web;
using System.Collections.Generic;
using System.Linq;
using System.Text;
public class delete : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        string id=context.Request["ids"];
        using (DataClassesDataContext con=new DataClassesDataContext())
        {
            user1 us = con.user1.Where(r => r.ids.ToString() == id).FirstOrDefault();
            if (us != null)
            {
                con.user1.DeleteOnSubmit(us);
                con.SubmitChanges();
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

//刷新方法：
function f5() {
    $.ajax({
        url: "Handler2.ashx",
        data: {},
        type: "post",
        dataType: "json",
        async: false,
        success: function (msg) {
            $("#tbody1").html("");
            //alert(msg.length);
            for (var i = 0; i < msg.length; i++) {
                var str = "  <tr style=\"background-color:white;\">"
                str += "<td><input  type=\"checkbox\" value=\"" + msg[i].ids + "\" class=\"check\"/></td>";
                str += " <td>" + msg[i].username + "</td>";
                str += " <td>" + msg[i].password + "</td>";
                str += "<td>" + msg[i].nickname + "</td>";
                str += "<td>" + msg[i].sex + "</td>";
                str += "<td>" + msg[i].birthday + "</td>";
                str += "<td>" + msg[i].nation + "</td>";
                str += " </tr>";
                $("#tbody1").append(str);
            }
        },
        error: function () {
            alert("err");
        },
        beforeSend: function () {
            $("#btn1").attr("disabled", "disabled");
            $("#btn1").val("加载中......");
        },
        complete: function () {
            $("#btn1").removeAttr("disabled");
            $("#btn1").val("加载数据");
        }

    });
}
//弹窗
function myalert(t, c)

{
    var tcstr = " <div id=\"tc\" style=\"position:fixed; width:400px; left:50%;margin-left:-200px;top:-500px; border:1px solid navy;box-shadow:0 0 10px #808080;border-radius:10px 11px; z-index:11;\">";
    tcstr +=" <div id=\"tc-top\" style=\" width:100%;height:30px; background-color:navy;color:white; font-size:18px; font-weight:bold;text-align:center;line-height:30px; border-radius:10px 11px;\">";
    tcstr +=t; //这里是标题
    tcstr +="</div><div id=\"tc-main\" style=\" padding:20px;text-align:center;background-color:white;\">";
    tcstr +=c;
    tcstr +=" </div><div id=\"tc-bottom\" style=\"position:relative;width:100%; height:40px;\">";
    tcstr +=" <div  onclick=\"tcbtn1();\" id=\"tc-btn1\" style=\" position:absolute; width:100px; height:30px; top:5px;background-color:navy;color:white; text-align:center;line-height:30px;cursor:pointer;left:50%; margin-left:-50px;font-weight:bold;\"> 确定</div></div></div>";
    tcstr +="<div id=\"tc-zz\" style=\" position:fixed;top:0px;left:0px;width:100%;height:100%; background-color:black;opacity:0.3; display:none; z-index:10;\"></div>";
    $(document.body).append(tcstr);
    $("#tc-top").text(t);
    $("#tc-main").html(c);
    $("#tc").animate({ top: "100" }, 500).animate({ top: "90" }, 100).animate({ top: "100" }, 300);
    $("#tc-zz").css("display", "block");
}
//弹窗确定按钮要调用的方法：
function tcbtn1() {
    //添加用户时：
    if ($("#tc-top").text() == "添加新用户") 
    {
        var name = $("#t1").val();
        var pwd = $("#t2").val();
        var nic = $("#t3").val();
        var sex = $("#t4").val();
        var bir = $("#t5").val();
        var nation = $("#t6").val();
        $.ajax({

            url: "insert.ashx",
            data: { "uname": name, "password": pwd, "nickname": nic, "sex": sex, "birthday": bir, "nation": nation },
            type: "post",
            dataType: "json",
            async: false,
            success: function (msg)
            {
                alert("添加成功！！");
                $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () {
                    $("#tc-zz").css("display", "none"); $("#tc").remove();
                    $("#tc-zz").remove();
                });
            },
            error: function ()
            {
                alert("添加失败！！");
                $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () {
                    $("#tc-zz").css("display", "none"); $("#tc").remove();
                    $("#tc-zz").remove();
                });

            }

        });
        f5();
    }
        //修改用户时：
    else if ($("#tc-top").text() == "修改用户")
    {

        var name = $("#t1").val();
        var pwd = $("#t2").val();
        var nic = $("#t3").val();
        var sex = $("#t4").val();
        var bir = $("#t5").val();
        var nation = $("#t6").val();
        var count = $(".check").length;
        var ss = "";
        var c = 0;
        for (var i = 0; i < count; i++) 
        {
            if ($(".check")[i].checked) 
            {
                if (c > 0) 
                {
                    ss += ",";
                }
                ss += $(".check")[i].value;
                c++;
            }
        }
        alert(ss);
        $.ajax({

            url: "update.ashx",
            data: { "ids": ss, "password": pwd, "nickname": nic, "sex": sex, "birthday": bir, "nation": nation },
            type: "post",
            dataType: "json",
            async: false,
            success: function (msg) {
                alert("修改成功！！");
                $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () {
                    $("#tc-zz").css("display", "none"); $("#tc").remove();
                    $("#tc-zz").remove();
                });
            },
            error: function () 
            {
                alert("修改失败！！");

                $("#tc").animate({ top: "110" }, 200).animate({ top: "-500" }, 500, function () {
                    $("#tc-zz").css("display", "none"); $("#tc").remove();
                    $("#tc-zz").remove();
                });
            }

        });
        f5();
    }
}

posted on 2017-06-08 11:08 口袋里的SKY 阅读(235) 评论(0) 编辑收藏举报