常用的Ajax异步操作范例,使用Ajax验证用户名是否已存在

最新推荐文章于 2017-11-06 20:43:40 发布

ikiss

最新推荐文章于 2017-11-06 20:43:40 发布

阅读量1.7k

点赞数

分类专栏： AJAX技术文章标签： ajax xmlhttprequest function asp.net html string

本文链接：https://blog.csdn.net/ikiss/article/details/1858203

版权

AJAX技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

设计思路：
1.javascript获取输入的用户名
2.用XMLHTTPRequest把用户名提交给动态处理页面(本例采用ASP.net+C#，如果是其它语言也可以)
3.后台处理页面获取此用户名后在数据库中查询用户是否已存在，如果存在就返回 "true"
4.XMLHTTPRequest获取输出的字符串
5.根据输出结果在页面上显示“用户已存在”或“可以注册”字样

前台页面如下：
<html>
<body>
<input id="inName" type="text" οnchange="checkName()" /> <span id="checkNameText"></span>
</body>
</html>
<script type="text/javascript">
var request=new ActiveXObject("Microsoft.XMLHTTP");
//此函数获取输入的用户名并提交
function checkName()
{
    var strName=document.getElementById("inName").value;
    //通过Open方法把参数传递给后台页面
    request.open("GET","AjaxAction.aspx?checkname="+strName,true);
    //后台操作完毕后用checkNameText函数来处理结果
    request.onreadystatechange=function(){checkNameText();}
    //发送请示
    request.send();
}
//此函数获得处理页面的输出字符
function checkNameText()
{
    //用responseText方法获得输出的字符串，判断后进行相应处理
    if(request.responseText=="true")
    {
        document.getElementById("nameInfo").innerHTML="<font color=red>用户已存在</font>";
    }
    else
    {
         document.getElementById("nameInfo").innerHTML="<font color=green>可以注册</font>";
    }
}
</script>

后台页面，在aspx中只能有<%@ %>指令，不能出现任何HTML代码否则将出错
.cs文件中的主要代码
//如果
   if (Request.QueryString["checkname"] != null)
   {
        //用URL中的checkname值作为参数将CheckUser函数返回的bool型结果转换成小写字符串输出
        Response.Write(CheckUser(Request.QueryString["checkname"].ToString()).ToString().ToLower());
   }
    //验证用户是否存在，如果存在就返回True
    bool CheckUser(string Name)
    {
        SqlConnection Conn = new SqlConnection(ConfigurationSettings.AppSettings[0]);
        SqlCommand Cmd = new SqlCommand("select id from USER where NAME='" + Name + "'", Conn);
        Conn.Open();
        SqlDataReader DR = Cmd.ExecuteReader();
        return DR.Read();
        Conn.Close();
    }