Html+ashx实现页面注册

图片
这里有检查用户是否存在，密保问题的绑定以及用户的注册的功能：
 准备内容：
数据库：

USE master
GO
IF EXISTS (SELECT * FROM sys.sysdatabases WHERE name='stus')
DROP DATABASE stus
GO
CREATE DATABASE stus
ON
(
  NAME ='stus',
  FILENAME='D:\sql\stus.mdf',
  SIZE=5,
  FILEGROWTH=10%
)
LOG ON
(
   NAME ='stus_log',
  FILENAME='D:\sql\stus_log.ldf',
  SIZE=5,
  FILEGROWTH=10%
)
GO
 
-----------------------
USE stus
GO
IF EXISTS(SELECT * FROM sysobjects WHERE name='questions')
DROP TABLE dbo.questions
GO
CREATE TABLE questions
(
  qid INT IDENTITY(1,1) PRIMARY KEY,
  question VARCHAR(30) NOT null
)
GO
INSERT INTO dbo.questions(dbo.question) VALUES('最喜欢的颜色？'),('最喜欢的明星？'),('最喜欢的运动？')
go
 
 
--------------
USE stus
GO
IF EXISTS(SELECT * FROM sysobjects WHERE name='users')
DROP TABLE users
GO
CREATE TABLE users
(
  [uid] INT IDENTITY(1,1) PRIMARY KEY,
  uname VARCHAR(20) NOT NULL,
  upwd VARCHAR(6) NOT NULL,
  ugender char(2) CHECK(ugender IN ('男','女')) NOT null,
  uaddress VARCHAR(30) NOT NULL,
  qid INT FOREIGN KEY REFERENCES questions (qid),
  answer VARCHAR(30) NOT null
)
GO
INSERT INTO dbo.users(uname ,upwd ,ugender ,uaddress ,qid ,answer)
VALUES('jack','123456','男','湖北十堰',1,'橘红色')
GO
 

SQLHerper.cs：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Configuration;
using System.Data;
using  System.Data.SqlClient;
     public class SQLHelper
     {
         //连接数据库字符串
         private static readonly string Constr = ConfigurationManager.ConnectionStrings["db"].ConnectionString;
         /// <summary>
         /// 读取的方法
         /// </summary>
         /// <param name="type">判断类型</param>
         /// <param name="sql">语句或存储过程的名称</param>
         /// <param name="pars">参数</param>
         /// <returns>返回SqlDataReader的对象</returns>
         public static SqlDataReader GetReader(CommandType type, string sql, params SqlParameter[] pars)
         {
             SqlConnection con=new SqlConnection(Constr);
             SqlCommand cmd=new SqlCommand();
             try
             {
                 Parems(con, cmd, type, sql, null, pars);
                 SqlDataReader red = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                 return red;
             }
             catch (Exception)
             {
                 con.Close();
                 throw;
             }
 
         }
         /// <summary>
         /// 返回一行一列
         /// </summary>
         /// <param name="type">判断类型</param>
         /// <param name="sql">语句或存储过程的名称</param>
         /// <param name="pars">参数</param>
         /// <returns>返回查询得出的第一行第一列</returns>
         public static object Scalar(CommandType type, string sql, params SqlParameter[] pars)
         {
             using (SqlConnection con = new SqlConnection(Constr))
             {
                 using (SqlCommand cmd = new SqlCommand())
                 {
                     Parems(con, cmd, type, sql, null, pars);
                     object relst = cmd.ExecuteScalar();
                     return relst;
                 }
             }
         }
         /// <summary>
         /// 增删改的方法
         /// </summary>
         /// <param name="type">判断类型</param>
         /// <param name="sql">语句或存储过程的名称</param>
         /// <param name="pars">参数</param>
         /// <returns>返回受影响的行数</returns>
         public static int ExecuteNonQuery(CommandType type, string sql, params SqlParameter[] pars)
         {
             //using 1、应用命名空间 2、释放资源
             using (SqlConnection con = new SqlConnection(Constr))
             {
                 using (SqlCommand cmd=new SqlCommand())
                 {
                     Parems(con, cmd, type, sql, null, pars);
                     int relst = cmd.ExecuteNonQuery();
                     return relst;
                 }
             }
         }
         /// <summary>
         /// 返回DataTable对象
         /// </summary>
         /// <param name="type">判断类型</param>
         /// <param name="sql">语句或存储过程的名称</param>
         /// <param name="pars">参数</param>
         /// <returns>返回DataTable对象</returns>
         public static DataTable GetTable(CommandType type, string sql, params SqlParameter[] pars)
         {
             
             SqlConnection con = new SqlConnection(Constr);
             SqlCommand cmd=new SqlCommand();
             Parems(con, cmd, type, sql, null, pars);
             SqlDataAdapter apt=new SqlDataAdapter(cmd);
             DataTable dt=new DataTable();
             apt.Fill(dt);
             return dt;
 
         }
         /// <summary>
         /// 连接数据库
         /// </summary>
         /// <param name="con">连接数据库对象</param>
         /// <param name="cmd">操作数据库对象</param>
         /// <param name="type">判断类型</param>
         /// <param name="sql">sql语句或存储过程的名称</param>
         /// <param name="tran">事务</param>
         /// <param name="pars">参数</param>
         private static void Parems(SqlConnection con, SqlCommand cmd, CommandType type, string sql, SqlTransaction tran,
             SqlParameter[] pars)
         {
             if(con.State== ConnectionState.Closed)
                 con.Open();//打开数据库
             cmd.Connection = con;//数据库连接
             if (tran != null)
                 cmd.Transaction = tran;//事务
             cmd.CommandType = type;//判断类型
             cmd.CommandText = sql;//sql语句或存储过程的名称
             if (pars != null)
             {
                 foreach (SqlParameter pp in pars)
                 {
                     cmd.Parameters.Add(pp);
                 }
             }
         }
     }
JSONHelper.cs:
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
 
namespace Userinfo
{
    /// <summary>
    /// b 的摘要说明
    /// </summary>
    public class b : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string no = context.Request["uname"].ToString();
            int num = GetUserName(no);
            if (num > 0)
            {
                context.Response.Write("用户名已存在！");
            }
            else
            {
                context.Response.Write("用户名可用！");
            }
        }
        int GetUserName(string no)
        {
            string sql = string.Format("SELECT COUNT(*) FROM users WHERE uname='{0}'", no);
            int num = Convert.ToInt32(SQLHelper.Scalar(CommandType.Text, sql, null));
            return num;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
还需要用到：jquery-1.11.0.min.js，json2.js，bootstrap.min.js，bootstrap.css 请自行下载！
先实现检查用户名是否存在：
html页面里面：
<label class="label label-default">用户名:</label>
        <input type="text" name="uname"  class="form-group-lg" id="uname" placeholder="请输入用户名" size="20"/>
    <input type="button" id="btn1" value=" 检查用户名是否存在"  class="btn btn-default"/><br/>
$(function() {
            $("#btn1").click(function() {
                var txt = $("#uname").val();
                if (txt == "" || txt == null) {
                    alert("请输入用户名！");
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "b.ashx",
                    data: { uname: txt },
                    success:function(msg) {
                        if (msg == "用户名已存在！") {
                            alert(msg);
                            $("#uname").val("");
                        } else {
                            alert(msg);
                        }
                    }
                });
            });
      });
b.ashx 对检查用户是否存在的逻辑处理：
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
 
namespace Userinfo
{
    /// <summary>
    /// b 的摘要说明
    /// </summary>
    public class b : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string no = context.Request["uname"].ToString();
            int num = GetUserName(no);
            if (num > 0)
            {
                context.Response.Write("用户名已存在！");
            }
            else
            {
                context.Response.Write("用户名可用！");
            }
        }
        int GetUserName(string no)
        {
            string sql = string.Format("SELECT COUNT(*) FROM users WHERE uname='{0}'", no);
            int num = Convert.ToInt32(SQLHelper.Scalar(CommandType.Text, sql, null));
            return num;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}  
 接下来实现下拉框的绑定：
html 里面的代码：
<label class="label label-default">密保问题:</label>
    <select id="sel" name="sel">
    </select><br/>
 $(function() {
    $.ajax({
                type: "post",
                url: "a.ashx",
                success: function(msg) {
                    var ok = JSON.parse(msg);
                    $.each(ok.DataTable, function(i, j) {
                        var op = new Option();
                        op.value = j.qid;
                        op.text = j.question;
                        document.getElementById("sel").add(op);
                    });
                }
            });
});  
a.ashx 是绑定下拉框的逻辑处理：
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
 
namespace Userinfo
{
    /// <summary>
    /// a 的摘要说明
    /// </summary>
    public class a : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            DataTable dt = GetTable();
            string str = JSONHelper.DataTableToJsonEx(dt);
            context.Response.Write(str);
        }
 
        DataTable GetTable()
        {
            string sql = string.Format("SELECT qid, question FROM dbo.questions");
            return SQLHelper.GetTable(CommandType.Text, sql, null);
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
接下来就是实现 注册的功能：
register.html 页面源码：
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="JS/jquery-1.11.0.min.js"></script>
    <script src="JS/json2.js"></script>
    <script src="JS/bootstrap.min.js"></script>
    <link href="JS/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function() {
            $("#btn1").click(function() {
                var txt = $("#uname").val();
                if (txt == "" || txt == null) {
                    alert("请输入用户名！");
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "b.ashx",
                    data: { uname: txt },
                    success:function(msg) {
                        if (msg == "用户名已存在！") {
                            alert(msg);
                            $("#uname").val("");
                        } else {
                            alert(msg);
                        }
                    }
                });
            });
            $.ajax({
                type: "post",
                url: "a.ashx",
                success: function(msg) {
                    var ok = JSON.parse(msg);
                    $.each(ok.DataTable, function(i, j) {
                        var op = new Option();
                        op.value = j.qid;
                        op.text = j.question;
                        document.getElementById("sel").add(op);
                    });
                }
            });
            $("#btn2").click(function() {
                var txt = $("#uname").val();//获取用户名
                var pwds = $("#pwd").val();//获取密码
                var sexs = $("input:radio:checked").val();//获取选中的单选按钮
                
                var addresses = $("#address").val();
                var qid = $("#sel").val();//获取选中的下拉框的对应的id
                var answers = $("#answer").val();//获取密保答案
                $.ajax({
                    type: "post",
                    url: "register.ashx",
                    data: { uname: txt, pwd: pwds, sex: sexs, address: addresses, sel: qid, answer: answers },
                    success: function(msg) {
                        if (msg == "注册成功！") {
                            alert(msg);
                        } else {
                            alert(msg);
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <label class="label label-default">用户名:</label>
        <input type="text" name="uname"  class="form-group-lg" id="uname" placeholder="请输入用户名" size="20"/>
    <input type="button" id="btn1" value=" 检查用户名是否存在"  class="btn btn-default"/><br/>
    <label class="label label-default">密&nbsp; &nbsp;&nbsp;码:</label>
    <input type="password" name="pwd"   class="form-group-lg" id="pwd" placeholder="请输入密码" /><br/>
    <label class="label label-default">性&nbsp; &nbsp;&nbsp;别:</label>
    <input id="Radio1" type="radio" name="sex"  value="男" checked="checked"/>男
    <input id="Radio2" type="radio" name="sex" value="女"/>女<br/>
    <label class="label label-default">住&nbsp; &nbsp;&nbsp;址:</label>
    <input type="text" name="address"  class="form-group-lg" id="address" placeholder="请输入住址" size="20"/><br/>
    <label class="label label-default">密保问题:</label>
    <select id="sel" name="sel">
    </select><br/>
    <label class="label label-default">密保答案:</label>
    <input type="text" name="answer"  class="form-group-lg" id="answer" placeholder="请输入密保答案" size="20"/>
    <br/>
   <input type="button" id="btn2" value=" 用户注册"  class="btn btn-group"/><br/>
</body>
</html>
register.ashx 是实现注册的处理页面：
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web;
 
namespace Userinfo
{
    /// <summary>
    /// register 的摘要说明
    /// </summary>
    public class register : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //{ uname: txt, pwd: pwds, sex: sexs, sel: qid, answer: answers },
            Users u=new Users();
            u.Uname=context.Request["uname"].ToString();
            u.Upwd=context.Request["pwd"].ToString();
            u.Ugender=Convert.ToChar(context.Request["sex"]);
            u.Uaddress = context.Request["address"].ToString();
            u.Qid = Convert.ToInt32(context.Request["sel"].ToString());
            u.Answer = context.Request["answer"].ToString();
            int flag = InsertUsers(u);
            if (flag > 0)
            {
                context.Response.Write("注册成功！");
            }
            else
            {
                context.Response.Write("注册失败！");
            }
 
 
        }
 
        int InsertUsers(Users uu)
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("insert into users(uname ,upwd ,ugender ,uaddress ,qid ,answer)");
            sb.AppendFormat(" values('{0}','{1}','{2}','{3}',{4},'{5}')",uu.Uname,uu.Upwd,uu.Ugender,uu.Uaddress,uu.Qid,uu.Answer);
            string sql= sb.ToString();
          return  SQLHelper.ExecuteNonQuery(CommandType.Text, sql, null);
 
        }
       
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
 
        class  Users
        {
            public Users()
            {
            }
             public Users(string no,string pwd,char gender,string address,int qid,string answer)
             {
                 this.Uname = no;
                 this.Upwd = pwd;
                 this.Ugender = gender;
                 this.Uaddress = address;
                 this.Qid = qid;
                 this.Answer = answer;
             }
            public string Uname { get; set; }
            public string  Upwd { get; set; }
            public char Ugender { get; set; }
            public string  Uaddress { get; set; }
            public int Qid { get; set; }
            public string  Answer { get; set; }
        }
    }
}
posted @ 2017-02-12 14:22  智取  阅读(128)  评论(0)  编辑  收藏  举报