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

    http://apt.91.com http://apt.178.com Flex 2的官方安装源是 getdelta.co

  2. systemctl的常用命令

    #systemctl #systemctl --all #systemctl list-units --type=sokect #systemctl list-units --type=service ...

  3. python之smtplib模块 发送邮件

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #smtplib模块 发送邮件 import smtplib from email.mime.text imp ...

  4. grep -A -B -C

    Linux中grep/egrep查找命令 grep --color    ###颜色着重显示命中的文件及文件件 -n  ###显示行号  number -i   ###忽略大小写 ignore -c ...

  5. Linux（CentOS）的server安装及配置图解（图文）

    CentOS,据说这个如今在server上装机量非常大. 安装的分区划分 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdXBpMnU=/font/5a6L ...

  6. document.body、document.documentElement和window获取视窗大小的差别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...

  7. awk 取列后对数值进行判断取出大于1的数值

    [root@dataline-prod nginx]# tail -2 access.log 122.238.119.177 - - [26/Oct/2018:18:20:25 +0800] &quo ...

  8. 面试题 Comparable、Comparator 比较

    Comparable 用作默认的比较方式 Comparator 用作自定义的比较方式,当默认的比较方式不适用时或者没有提供默认的比较方式,使用Comparator就非常有用. 像Arrays和Coll ...

  9. try语句...

    #include<stdio.h>#include<iostream>using namespace std; int main( ){ try { throw "嗨 ...

  10. NYOJ-------三角形

    Problem A 三角形 时间限制:1000 ms  |  内存限制:65535 KB   描述 在数学中,如果知道了三个点的坐标,我们就可以判断这三个点能否组成一个三角形:如果可以组成三角形,那么 ...