zoukankan      html  css  js  c++  java
  • Ajax实现异步刷新验证用户名是否已存在

    由于要做一个注册页面,看到许多网站上都是使用Ajax异步刷新验证用户名是否可用的,所以自己也动手做一个小实例

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

    静态页面Ajax.html

     1 <html>
     2     <head>
     3         <title>Ajax</title>
     4         <script type="text/javascript">
     5             function loadXMLDoc() {
     6                 if (document.getElementById("account").value == "") {
     7                     document.getElementById("accDiv").innerHTML = "用户名不能为空";
     8                     return;
     9                 }
    10                 var xmlHttp;
    11                 if(window.XMLHttpRequest) { // code for IE7+
    12                     xmlHttp = new XMLHttpRequest();
    13                 }
    14                 else { // code for IE5/IE6
    15                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    16                 }
    17 
    18                 xmlHttp.onreadystatechange = function () {
    19                     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    20                         //document.getElementById("myDiv").innerHTML=xmlHttp.responseText;
    21                         if (xmlHttp.responseText == "true") {
    22                             document.getElementById("accDiv").innerHTML = "用户名不可用";
    23                         }
    24                         else {
    25                             document.getElementById("accDiv").innerHTML = "用户名可用";
    26                         }
    27                     }
    28                 }
    29                 var a = document.getElementById("account").value;
    30                 // get
    31                 xmlHttp.open("GET", "validate.aspx?account=" + a + "&random=" + Math.random, true);
    32                 xmlHttp.send();
    33             }
    34             function delData() {
    35                 document.getElementById("account").value = "";
    36                 document.getElementById("accDiv").innerHTML = "";
    37             }
    38         </script>
    39     </head>
    40     <body>
    41         <h3>ajax</h3>
    42         <table>
    43             <tr>
    44                 <td>账号:</td><td><input id="account" type="text" onblur="loadXMLDoc();" onfocus="delData();"/></td><td><div id="accDiv"></div></td>
    45             </tr>
    46             <tr>
    47                 <td>密码:</td><td><input id="passwd" type="password" /></td>
    48             </tr>
    49             <tr>
    50                 <td>确认密码:</td><td><input id="vPasswd" type="password" /></td>
    51             </tr>
    52             <tr>
    53                 <td>姓名:</td><td><input id="name" type="text" /></td>
    54             </tr>
    55         </table>
    56         
    57     </body>
    58 </html>

    在账号输入框失去焦点时调用函数

    访问服务器使用的是Get方法,所以在参数处使用了附加随机码来避免缓存。

    验证页面validate.aspx后台代码

     1 using System;
     2 using System.Collections.Generic;
     3 using System.Linq;
     4 using System.Web;
     5 using System.Web.UI;
     6 using System.Web.UI.WebControls;
     7 using System.Configuration;
     8 using System.Data.Sql;
     9 using System.Data.SqlClient;
    10 
    11 public partial class Ajax_validate_validate : System.Web.UI.Page
    12 {
    13     public SqlConnection conn;
    14 
    15     protected void Page_Load(object sender, EventArgs e)
    16     {
    17         Response.Clear();
    18         if (Exists(Request.QueryString["account"]))
    19             Response.Write("true");
    20         else
    21             Response.Write("false");
    22         Response.End();
    23     }
    24     /// <summary>
    25     /// 获取数据库连接
    26     /// </summary>
    27     /// <returns></returns>
    28     protected SqlConnection GetConnection()
    29     {
    30         string str = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    31         conn = new SqlConnection(str);
    32         return conn;
    33     }
    34     protected bool Exists(string account)
    35     {
    36         using (GetConnection())
    37         {
    38             try
    39             {
    40                 conn.Open();
    41                 string sqlStr = "select count(*) from userinfo where account='" + account + "'";
    42                 SqlCommand cmd = new SqlCommand(sqlStr, conn);
    43                 int row = Convert.ToInt32(cmd.ExecuteScalar());
    44                 if (row > 0)
    45                     return true;
    46                 else
    47                     return false;
    48             }
    49             catch (Exception e)
    50             {
    51                 throw e;
    52             }
    53             finally
    54             {
    55                 conn.Close();
    56             }
    57         }
    58     }
    59 }

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

    运行结果

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

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

  • 相关阅读:
    Android中,粗暴的方式,修改字体
    Android 修改字体,跳不过的 Typeface
    Android 字体修改,所有的细节都在这里 | 开篇
    当你在设置里修改字体大小的时候,到底在修改什么
    使用 Palette 让你的 UI 色彩与内容更贴合
    View.post() 不靠谱的地方你知道吗?
    九月了,回头看看八月你错过的原创好文
    海外 App 的推送服务,试试 FCM 吧!!!
    微信原图泄露的只能是 Exif ,你的隐私不在这!!!
    RecyclerView 配合 DiffUtil,好用到飞起
  • 原文地址:https://www.cnblogs.com/lit10050528/p/3542665.html
Copyright © 2011-2022 走看看