Ajax實現非同步重新整理驗證使用者名稱是否已存在的具體方法

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

由於要做一個註冊頁面，看到許多網站上都是使用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 > 0) return true; else return false; } catch (Exception e) { throw e; } finally { conn.Close(); } } }} 在後台中驗證使用者名稱是否已經存在於資料庫中，返回真或者假資料庫很簡單，只建了一張表userinfo，有3個欄位：account、passwd、name 注意：在後台往請求頁面寫資料時，當寫完要發送的資料之後，需要調用Response.end()方法來終止寫入，否則可能會發送一個完整頁面過去。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More