您的位置：首页 > 编程技术 > ASP.NET  >  Ajax实现异步刷新验证用户名是否已存在的具体方法

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

 更新时间：2021年9月22日 10:12  点击：1875

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

静态页面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()方法来终止写入，否则可能会发送一个完整页面过去。

[!--infotagslink--]

相关文章

  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20

  • 深入分析C#中的异步和多线程

    这篇文章主要介绍了C#中异步和多线程的相关资料，帮助大家更好的理解和学习c#，感兴趣的朋友可以了解下...2021-01-16

  • C#多线程与异步的区别详解

    多线程和异步操作两者都可以达到避免调用线程阻塞的目的，从而提高软件的可响应性。甚至有些时候我们就认为多线程和异步操作是等同的概念。但是，多线程和异步操作还是有一些区别的。而这些区别造成了使用多线程和异步操作的时机的区别...2020-06-25

  • 详解C# Socket异步通信实例

    本篇文章主要介绍了C# Socket异步通信,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法

    这篇文章主要介绍了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法,涉及JavaScript页面元素定时滚动操作及ajax调用实现技巧,需要的朋友可以参考下...2016-04-19

  • JS异步的执行原理和回调详解

    这篇文章主要给大家介绍了关于JS异步的执行原理和回调的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-08

  • jQuery+ajax简单实现文件上传的方法

    这篇文章主要介绍了jQuery+ajax简单实现文件上传的方法,结合实例形式简单分析了jQuery基于ajax的post方法进行文件传输及asp.net后台处理技巧,需要的朋友可以参考下...2016-06-12

  • c# winform异步不卡界面的实现方法

    这篇文章主要给大家介绍了关于c# winform异步不卡界面的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用c#具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-06-25

  • jquery Ajax实现Select动态添加数据

    这篇文章主要为大家详细介绍了jquery Ajax实现Select动态添加数据的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-06-15

  • JQuery基于FormData异步提交数据文件

    这篇文章主要介绍了JQuery基于FormData异步提交数据文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-02

  • js实现ajax的用户简单登入功能

    这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-19

  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面，如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI，感兴趣的小伙伴们可以参考一下...2016-06-24

  • jquery+Ajax实现简单分页条效果

    这篇文章主要为大家详细介绍了jquery+Ajax实现简单分页条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-06-17

  • PHP+jQuery+Ajax实现多图片上传效果

    今天我给大家分享的是在不刷新页面的前提下，使用PHP+jQuery+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并展示在页面上。...2015-03-15

  • Bootstrap进度条与AJAX后端数据传递结合使用实例详解

    这篇文章主要介绍了Bootstrap进度条与AJAX后端数据传递结合使用,需要的朋友可以参考下...2017-04-27

  • jquery ajax局部加载方法详解(实现代码)

    下面想就为大家带来一篇jquery ajax局部加载方法详解(实现代码)。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-05-14

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化，展示不同区域的数据分布信息，通过本文给大家介绍如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据，需要的朋友参考下吧...2016-02-26

  • JQuery异步提交表单与文件上传功能示例

    这篇文章主要介绍了JQuery异步提交表单与文件上传功能,结合实例形式分析了jQuery表单提交及文件传输操作的相关实现技巧,需要的朋友可以参考下...2017-01-16

  • jQuery Ajax全解析

    本文主要介绍了Ajax基本概念；Ajax的异步加载局部刷新功能的实现；通过XMLHttpRequest发送请求。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-19

  • C#异步的世界(下)

    这篇文章主要介绍了C#异步的世界(下)，对异步感兴趣的同学，可以参考下...2021-04-26