Ajax实现异步刷新验证用户名是否已存在的具体方法

 更新时间:2014年02月11日 15:06:48   作者:  
由于要做一个注册页面,看到许多网站上都是使用Ajax异步刷新验证用户名是否可用的,所以自己也动手做一个小实例

都是简单的实例,所以直接发代码

静态页面Ajax.html

复制代码 代码如下:

<html>
    <head>
        <title>Ajax</title>
        <script type="text/javascript">
            function loadXMLDoc() {
                if (document.getElementById("account").value == "") {
                    document.getElementById("accDiv").innerHTML = "用户名不能为空";
                    return;
                }
                var xmlHttp;
                if(window.XMLHttpRequest) { // code for IE7+
                    xmlHttp = new XMLHttpRequest();
                }
                else { // code for IE5/IE6
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlHttp.onreadystatechange = function () {
                    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                        //document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
                        if (xmlHttp.responseText == "true") {
                            document.getElementById("accDiv").innerHTML = "用户名不可用";
                        }
                        else {
                            document.getElementById("accDiv").innerHTML = "用户名可用";
                        }
                    }
                }
                var a = document.getElementById("account").value;
                // get
                xmlHttp.open("GET", "validate.aspx?account=" + a + "&random=" + Math.random, true);
                xmlHttp.send();
            }
            function delData() {
                document.getElementById("account").value = "";
                document.getElementById("accDiv").innerHTML = "";
            }
        </script>
    </head>
    <body>
        <h3>ajax</h3>
        <table>
            <tr>
                <td>账号:</td><td><input id="account" type="text" onblur="loadXMLDoc();" onfocus="delData();"/></td><td><div id="accDiv"></div></td>
            </tr>
            <tr>
                <td>密码:</td><td><input id="passwd" type="password" /></td>
            </tr>
            <tr>
                <td>确认密码:</td><td><input id="vPasswd" type="password" /></td>
            </tr>
            <tr>
                <td>姓名:</td><td><input id="name" type="text" /></td>
            </tr>
        </table>

    </body>
</html>


在账号输入框失去焦点时调用函数

访问服务器使用的是Get方法,所以在参数处使用了附加随机码来避免缓存。

验证页面validate.aspx后台代码:

复制代码 代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.Sql;
using System.Data.SqlClient;

public partial class Ajax_validate_validate : System.Web.UI.Page
{
    public SqlConnection conn;

    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Clear();
        if (Exists(Request.QueryString["account"]))
            Response.Write("true");
        else
            Response.Write("false");
        Response.End();
    }
    /// <summary>
    /// 获取数据库连接
    /// </summary>
    /// <returns></returns>
    protected SqlConnection GetConnection()
    {
        string str = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        conn = new SqlConnection(str);
        return conn;
    }
    protected bool Exists(string account)
    {
        using (GetConnection())
        {
            try
            {
                conn.Open();
                string sqlStr = "select count(*) from userinfo where account='" + account + "'";
                SqlCommand cmd = new SqlCommand(sqlStr, conn);
                int row = Convert.ToInt32(cmd.ExecuteScalar());
                if (row > 0)
                    return true;
                else
                    return false;
            }
            catch (Exception e)
            {
                throw e;
            }
            finally
            {
                conn.Close();
            }
        }
    }
}

在后台中验证用户名是否已经存在于数据库中,返回真或者假

运行结果:

数据库很简单,只建了一张表userinfo,有3个字段:account、passwd、name

注意:在后台往请求页面写数据时,当写完要发送的数据之后,需要调用Response.end()方法来终止写入,否则可能会发送一个完整页面过去。

相关文章

  • 详解ASP.NET 页面之间传值的几种方式

    详解ASP.NET 页面之间传值的几种方式

    本篇文章主要介绍了ASP.NET 页面之间传值的几种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • VS2008无法直接查看STL值的解决方法

    VS2008无法直接查看STL值的解决方法

    这篇文章主要为大家详细介绍了VS2008无法直接查看STL值的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • .net core中Quartz的使用方法

    .net core中Quartz的使用方法

    这篇文章主要介绍了.net core中Quartz的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • .NET Core自定义项目模板的全过程

    .NET Core自定义项目模板的全过程

    这篇文章主要给大家介绍了关于.NET Core自定义项目模板的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • ASP.NET ASHX中获得Session的方法

    ASP.NET ASHX中获得Session的方法

    有时候需要在ASHX中获取Session,可是一般是获取不到的,如何解决,下面说一下获得的方法
    2013-10-10
  • 如何为asp.net网站项目添加子项目

    如何为asp.net网站项目添加子项目

    最近要给公司的电子商务网站添加个圈子的功能.网站功能本来就包含有新闻发布,会员管理,商品购物,后台管理等,现在又要再加上圈子的功能,网站项目越来越复杂,每次编译生成的dll超过100k.这样每次修改任何一个功能中的任何一个小问题都要上传整个dll,并导致整个website的首次访问的重新编译.
    2008-10-10
  • ASP.NET MVC小结之基础篇(一)

    ASP.NET MVC小结之基础篇(一)

    本文是ASP.NET MVC系列的第一篇文章,跟其他学习系列一样,咱们先来点基础知识,之后再循序渐进。我们先从asp.net mvc的概念开始吧。
    2014-11-11
  • SqlDataReader生成动态Lambda表达式

    SqlDataReader生成动态Lambda表达式

    这篇文章主要介绍了SqlDataReader生成动态Lambda表达式,需要的朋友可以参考下
    2017-04-04
  • asp.net 获取TreeView中第一个选中的节点

    asp.net 获取TreeView中第一个选中的节点

    今天做的项目中有一个要获取TreeView中第一个选中的节点,当然子节点己包含checkbox以前做过,用的时候又不知道怎么做了,花了点时间又写了一下,记录下来,以备下次用.
    2010-03-03
  • dz asp.net论坛中函数--根据Url获得源文件内容

    dz asp.net论坛中函数--根据Url获得源文件内容

    从asp.net dz论坛发现的这个函数,学习一下高手的经验代码
    2008-09-09

最新评论