由于要做一个注册页面，看到许多网站上都是使用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 > )

                     return true;

                 else

                     return false;

             }

             catch (Exception e)

             {

                 throw e;

             }

             finally

             {

                 conn.Close();

             }

         }

     }

 }

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

运行结果

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

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

Ajax实现异步刷新验证用户名是否已存在的更多相关文章

  1. ssh整合问题总结--使用struts2+Ajax+jquery验证用户名是否已被注册

    在用户模块中的用户注册需求上,通常要进行用户名是否已被注册的验证,今天正好写了这个需求,把详细代码和所遇到的问题贴过来.在使用struts2+ajax时候,通常我们会返回json类型的数据,但是像上面 ...

  2. 《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

    当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求. 一.实现思路: 1.用户输入信息 2 ...

  3. Django——Ajax发送请求验证用户名是否被注册

    场景: 用户注册的时候,输入用户名之后,Ajax发送请求到后端,后端验证该用户名是否已经被注册,然后返回到注册页面提示用户. 1.模型: from django.db import models cl ...

  4. 提交ajax验证用户名是否已存在

    前端页面 <tr> <td class="p_label"><span class="notnull"></span& ...

  5. EasyUI validatebox 自定义ajax验证用户名是否已存在

    <td><input type="text" id="userName" name="userName" class=&q ...

  6. ajax简单操作,验证用户名是否可以

    分别使用get,post方法进行提交. 如果输入用户名为admin时,鼠标失去焦点,显示不可以. <!DOCTYPE html> <html lang="en"& ...

  7. 基于jQuery实现的Ajax 验证用户名唯一性

    基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...

  8. 使用Ajax验证用户名

    Ajax是一项很重要的技术,下面简要举个例子,来解释如何使用Ajax.步骤如下:使用Ajax验证用户名使用文本框的onBlur事件 使用Ajax技术实现异步交互创建XMLHttpRequest对象通过 ...

  9. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

随机推荐

  1. Oracle 11g 更改字符集

    查看字符集: select * from v$nls_parameters where parameter = 'NLS_CHARACTERSET'; 修改字符集: sqlplus "/as ...

  2. jsp页面获取集合的长度

      createTime--2016年10月12日16:20:02Author:Marydonjsp页面获取集合的长度 在jsp页面与js中不能通过${list.size}取列表长度,而是引入jstl ...

  3. sublime text3及插件安装过程

    本人安装的是sublime text3 1.安装 这个过程下一步下一步即可 2.激活 在help菜单中选择输入验证码,例如以下整个都是: ----- BEGIN LICENSE ----- Andre ...

  4. 计算机顶级会议Rankings &amp;&amp; 英文投稿的一点经验

    英文投稿的一点经验[转载] From: http://chl033.woku.com/article/2893317.html 1. 首先一定要注意杂志的发表范围, 超出范围的千万别投,要不就是浪费时 ...

  5. 【Docker】容器中找不到vi命令

    在Docker容器中找不到vi命令 解决办法: 1.通过命令获取最新的软件包 apt-get-update 2.安装vi命令 apt-get install vim 安装过程中提示是否进行输入Y即可. ...

  6. Javakeyword之this

    this的作用: 1) this是当前对象的一个引用.便于对当前对象參数的使用. 2)能够返回对象的自己这个类的引用.同一时候还能够在一个构造函数其中调用还有一个构造函数 this演示样例: publ ...

  7. Android API之java.lang.String

      boolean java.lang.String.contains(CharSequence cs) String字符串是否包含CharSequence(cs).

  8. 【TP3.2】模块化设计，新建Admin模块

    1.模块化: Application 默认应用目录(可以设置) ├─Common 公共模块(不能直接访问) ├─Home 前台模块 ├─Admin 后台模块 ├─... 其他更多模块 ├─Runtim ...

  9. 堆 C语言实现

    1.基本概念 堆分为小根堆和大根堆,对于一个小根堆,它是具有如下特性的一棵完全二叉树: (1)若树根结点存在左孩子或右孩子,则根结点的值(或某个域的值)小于等于左右孩子结点的值(或某个域的值) (2) ...

  10. Java虚拟机学习 - JDK可视化监控工具 ( 7 )

    1.JConsole JConsole工具在JDK/bin目录下,启动JConsole后,将自动搜索本机运行的jvm进程,不需要jps命令来查询指定.双击其中一个jvm进程即可开始监控,也可使用“远程 ...