由于要做一个注册页面，看到许多网站上都是使用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. eclipse 修改maven项目的jdk版本

      eclipse 修改maven项目的jdk版本 CreationTime--2018年6月8日10点29分 Author:Marydon 1.情景展示 jdk版本太低,如何修改 2.错误方式 第一 ...

  2. iOS获取本地沙盒视频封面图片（含swift实现）

    最近做了个小应用,有涉及到本地视频播放及列表显示. 其中一个知识点就是获取本地存储视频,用来界面中的封面显示. 记录如下: //videoURL:本地视频路径 time:用来控制视频播放的时间点图片截 ...

  3. [CXF REST标准实战系列] 一、JAXB xml与javaBean的转换(转)

    转自:[CXF REST标准实战系列] 一.JAXB xml与javaBean的转换 文章Points: 1.不认识到犯错,然后得到永久的教训. 2.认识JAXB 3.代码实战 1.不认识到犯错,然后 ...

  4. Java虚拟机学习 - 查看JVM参数及值的命令行工具（6）

    查看JVM各个参数值方式 1. HotSpot vm中的各个globals.hpp文件  查看jvm初始的默认值及参数 globals.hpp globals_extension.hpp c1_glo ...

  5. 【java设计模式】之 责任链（chain of resposibility）模式

    责任链模式,顾名思义,就是一条链.这个链到底是怎么运行的呢?它主要是将能够处理同一类请求的对象连成一条链,所提交的请求沿着链传递,链上的对象逐个判断是否有能力处理该请求,如果能则处理,如果不能则传递给 ...

  6. Spring MVC+Mybatis 执行存储过程，使用Map进行参数的传递

    研究了一天mybatis如何执行存储过程,基本了解了ORM的设计思想,在map层面进行对象关系映射有两种思路. 根据不同的业务使用不同的思路: 一.实体类和数据库映射,就是将数据库中的字段和java实 ...

  7. OAF_OAF控件系列4 - HGrid的实现（案列）

    2014-06-02 Created By BaoXinjian

  8. Linux内核中锁机制之原子操作、自旋锁

    很多人会问这样的问题,Linux内核中提供了各式各样的同步锁机制到底有何作用?追根到底其实是由于操作系统中存在多进程对共享资源的并发访问,从而引起了进程间的竞态.这其中包括了我们所熟知的SMP系统,多 ...

  9. Objective-C学习笔记（十八）——对象方法和类方法的声明，定义及调用

    在程序设计中,函数的使用无疑大大简化了代码的编写.提高代码执行的效率.降低反复代码. 所以如今我们来具体研究一下方法. 本样例还是以People类为例. (一)代码一: (1)先在People.h中声 ...

  10. 在python3.x下使用如下代码： import cPickle as pk 报错

    在python3.x下使用如下代码: import cPickle as pk会报如下错误:ImportError: No module named 'cPickle' 原因:python2有cPic ...