由于要做一个注册页面，看到许多网站上都是使用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. POJ--2752--Seek the Name, Seek the Fame【KMP】

    链接:http://poj.org/problem? id=2752 题意:对于一个字符串S,可能存在前n个字符等于后n个字符,从小到大输出这些n值. 思路:这道题加深了对next数组的理解.next ...

  2. 【Linux】数组与关联数组

    数组 数组的定义: variable=(arg1 arg2 arg3 -) 中间用空格分开,数组的下标从0开始 1.获取下标为n的元素 variable[n] 不存在数组溢出的情况,如果下标n> ...

  3. Loadrunner脚本编程（4）-数据类型操作和字符串操作

    http://www.360doc.com/content/10/0806/13/1698198_44078277.shtml 一,数据类型转换 没有使用过C编程的LoadRunner脚本编写者会发现 ...

  4. Linux文件大小排序

    ls 文件详情 ls   -S /            ###从大到小排序ls   -Sr /          ###从小到大排就加个-r     -r 翻转ls   -aSr /         ...

  5. jsp中Undefined type: xxxx...

    在测试jsp的动作元素<jsp:useBean >时,写了一个计数器的栗子: JavaBean: package com.pers.count; /** * @author liangya ...

  6. Fn键

    需求分析 我想开机禁用触摸板. 方案设计 安装驱动:比较麻烦,驱动也不一定支持开机禁用触摸板. 编程实现,让一段代码开机禁用触摸板 编程实现也分好几种方法: 使用windows API禁用触摸板,这需 ...

  7. Android学习系列(10)--App列表之拖拽ListView(上)

     研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...

  8. web实现QQ第三方登录 开放平台-web实现QQ第三方登录

    应用场景     web应用通过QQ登录授权实现第三方登录.   操作步骤     1  注册成为QQ互联平台开发者,http://connect.qq.com/     2  准备一个可访问的域名, ...

  9. iOS - TouchLock 手势锁

    1.绘制手势锁 具体实现代码见 GitHub 源码 QExtension QTouchLockView.h @interface QTouchLockView : UIView /// 提示信息框 @ ...

  10. Python学习笔记015——汉字编码

    1 字符串的编码(encode)格式 GB2312   GBK   GB18030  UTF-8  ASCII 其中常用的编码格式有 国标系列:GB18030(GBK(GB2312)) (window ...