利用ajax实现多种注册角色的注册登录检测

最新推荐文章于 2021-08-05 18:16:50 发布

原创最新推荐文章于 2021-08-05 18:16:50 发布 · 734 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #radiobutton #xmlhttprequest #function #string #server

IT 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在页面A.aspx中使用Ajax实现多种角色（如课程管理员和普通学员）的注册登录检测。通过jsFile/createRequest.js中的JavaScript函数，结合radiobutton选择，发送XMLHttpRequest请求到resEvent.aspx进行服务器端的用户名检查。根据响应结果，更新前端显示提示信息。

页面A.aspx:

//这里我将js写在一个js文件中，用的时候直接导入就可以了。js文件内容在下面：

<body>标签内的内容：

<div> 请问要注册以下哪种身份？</div>
    <div>
        <asp:RadioButton ID="RadioButton1" runat="server" GroupName="sa" Text="课程管理员"/>
        <asp:RadioButton ID="RadioButton2" runat="server" GroupName="sa" Text="普通学员"   Checked="True" />

//因为是在探索过程，所以就做了2个选择。具体大家可以自己增加。
</div>
用户名:<input ID="strUserName" type="text" onblur="startRequest(document.getElementById_x('strUserName').value)"/>
<asp:Label ID="Label1" runat="server" Text="*" CssClass="res_lable" ></asp:Label><br />

A.cs //默认；

//---------------------------------我是性感的分割线的开始----------------------------------------

//好了这里是js文件代码：

var xmlhttpReques;
var s;
function startRequest(strUserName){
checkeRadionButton();

    if(strUserName==""){
        document.getElementById_x("Label1").innerText="不能为空";
        return false;
    }
    document.getElementById_x("Label1").innerText="*";
    var filter=/^/s*[A-Za-z0-9]{4,20}/s*$/;
    if (!filter.test(strUserName)) {
            document.getElementById_x("Label2").innerText="用户名填写不正确,请重新填写！可使用的字符为（A-Z a-z 0-9)/n长度不小于4个字符，不超过20个字符，注意不要使用空格。";
            document.getElementById_x('strUserName').focus();
            document.getElementById_x('strUserName').select();
            return false;
    }
    document.getElementById_x("Label2").innerText="";

    createXMLHttpRequest();   //1.生成xmlhttp对象
    var strUrl="resEvent.aspx?strUserName="+strUserName+"&strRadioButton="+s;

    xmlhttpReques.open("GET",strUrl,true);//3.执行open（"GET/POST","url",true）;一般后面还有3个参数，具体大家查看相关书籍。
    xmlhttpReques.onreadystatechange=checkUserName;//4.当对象发生变化时执行CheckUseName事件，方法在下面。
    xmlhttpReques.send(null); //5.正式向服务器发送请求。到这里才是真正的发送，前面4部皆可以理解为对这里的准备过程。

}
function createXMLHttpRequest(){ //生成xmlHttpRequest对象
    if(window.XMLHttpRequest){ // code for ie7+,opera,firefox,sarfi,ect!
        xmlhttpReques=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){ //code for ie6,ie5,ect!
        try{
            xmlhttpReques=new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){ }
    }
    if(!xmlhttpReques){
        window.alert('不能创建xmlHttpRequest实例！');
        return false;
    }
}
function checkUserName(){ //when 'xmlhttp.onreadystatechange'changed use this method
    if(xmlhttpReques.readyState==4){
        if(xmlhttpReques.status==200){
            if(xmlhttpReques.responseText=="canRes"){
                document.getElementById_x("Label1").innerText="可以注册！";
                }
            else if(xmlhttpReques.responseText=="canNotRes"){
                document.getElementById_x("Label1").innerText="该用户名已存在！";
                }
            }
    }
}
function checkeRadionButton(){
    if(document.getElementById_x("RadioButton1").checked==true){s="RadioButton1";}
    if(document.getElementById_x("RadioButton2").checked==true){s="RadioButton2";}
}
//----------------------------性感分割线结束-------------------------------------------

//下面是B.aspx。前台代码为空。

//B.cs. 仅仅在Page_Load（）方法内写代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        string strCheckName = Request.QueryString["strUserName"].ToString();
        //striUserName为 XXX.aspx?strUserName的strUserName此值！！wtf。。别用错了哦。
        string strSql="select * from UserInfo where LoginName='"+strCheckName+"'";

//哥们默认的注册用户是“普通学员”，即RadioButton1的checked默认为True，所以上面的是默认sql语句。

//若然RadionButton的Checked值都为False，则用户忘记选择时，会发生sqlException异常。
if (Request.QueryString["strRadioButton"] == "RadioButton1") strSql = "select * from AdmiInfo where LoginName='" + strCheckName + "'";
//判断哪个RadionButton按钮被选中，选中的改变查询的Sql语句。注：若有多个表，则需要多条判定语句。

//以下为查询部分，不做详细解释。。strPath 是在Web.config 的ConnectionStrings中预先配置好了。
        string strPath = ConfigurationManager.ConnectionStrings["conndb"].ToString();
        SqlConnection conn = new SqlConnection(strPath);
        conn.Open();
        SqlCommand cmd = new SqlCommand();
        cmd.Connection = conn;
        cmd.CommandText = strSql;
        SqlDataReader sdr = cmd.ExecuteReader();
        if (!sdr.HasRows)
        {
            Response.Write("canRes");
            Response.End();
        }
        else
        {
            Response.Write("canNotRes");
            Response.End();
        }
        sdr.Close();
        conn.Close();
    }