AJAX實例一：用AJAX驗證註冊用戶名是否可用

時間 2021-08-15

標籤 javascript html java jquery ide this spa code orm server 欄目 Ajax 简体版

原文原文鏈接

本例供新手參考。javascript

功能說明：當用戶在註冊頁面輸入用戶名而且鼠標焦點離開輸入框時，到數據表中去驗證該用戶名是否已經存在，若是存在提示【不可用】，不然，提示【可用】。html

必備知識：HTML、JavaScript、C#、ADO.NET，另外就是如何建立AJAX請求對象、使用open()和send()方法以及readyState、status、onreadystatechange、responseText的含義和用法。java

本例共用到2個頁面：UserReg.aspx—用戶註冊頁面（其實徹底能夠用靜態頁面）和 CheckUserName.aspx—把輸入的用戶名提交到這裏驗證。jquery

UserReg.aspx前臺代碼：ide

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UserReg.aspx.cs" Inherits="UserReg" %>
2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml">
5

<head runat="server">
6

<title>無標題頁</title>
7

<!--
10

function CheckUserName(userName){
11

var xmlhttp;
12

try{
13

xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
14

}
15

catch(e){
16

try{
17

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
18

}
19

catch(e){
20

try{
21

xmlhttp = new XMLHttpRequest();
22

}
23

catch(e)
24

{}
25

}
26

}
27

xmlhttp.onreadystatechange=function(){
29

if(xmlhttp.readyState == 4){
30

if(xmlhttp.status == 200){
31

var showMes = document.getElementById("showMes");
32

if(xmlhttp.responseText == "1"){
34

showMes.innerHTML="不可用";
35

}
36

else{
37

showMes.innerHTML= "可用";
38

}
39

}
40

}
41

}
43

xmlhttp.open("get","CheckUserName.aspx?userName="+escape(userName));
44

xmlhttp.send(null);
45

}
46

//-->
48

</script>
49

</head>
51

<body>
52

<form id="form1" runat="server">
53

<div>
54

用戶名<asp:TextBox ID="txtUserName" runat="server" onblur="CheckUserName(this.value);"></asp:TextBox>
55

<span id="showMes"></span>
56

<br />
57

密    碼<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
58

</div>
59

</form>
60

</body>
61

</html>
62

UserReg.aspx後臺代碼：無this

CheckUserName.aspx前臺代碼（把其餘的HTML代碼都清除，只留這一行）：spa

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckUserName.aspx.cs" Inherits="CheckUserName" %>
2

CheckUserName.aspx後臺代碼：code

using System;
2

using System.Collections;
3

using System.Configuration;
4

using System.Data;
5

using System.Linq;
6

using System.Web;
7

using System.Web.Security;
8

using System.Web.UI;
9

using System.Web.UI.HtmlControls;
10

using System.Web.UI.WebControls;
11

using System.Web.UI.WebControls.WebParts;
12

using System.Xml.Linq;
13

using System.Data.SqlClient;
14

public partial class CheckUserName : System.Web.UI.Page
16

{
17

protected void Page_Load(object sender, EventArgs e)
18

{
19

using (SqlConnection conn = new SqlConnection(
20

System.Configuration.ConfigurationManager.AppSettings["ConnStr"]))
21

{
22

SqlCommand cmd = new SqlCommand();
23

cmd.Connection = conn;
24

cmd.CommandText = string.Format(
25

"Select Count(*) From PUsers Where UserName='{0}'",
26

Request.QueryString["userName"]);
27

conn.Open();
28

if (int.Parse(cmd.ExecuteScalar().ToString()) == 1)
29

{
30

Response.Write("1");
31

}
32

else
33

{
34

Response.Write("2");
35

}
36

}
37

}
38

}
39

摘自：http://www.cnblogs.com/Ferry/archive/2008/12/24/1361435.htmlorm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。