昨天我一哥们问我如何ajax验证用户名唯一性的问题,这个问题虽然简单,但是对于新手没有经验的童鞋们来讲,还是不清楚,这里呢,我写了一个例子,例子不难,用asp.Net技术+ajax+handler即可,另外,数据传递通过json格式,具体的我讲不清楚了,呵呵,我把我的例子放在这里,有需要的童鞋可以拿去,在下去也~~~
前台代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="ValidateUserName.login" %>
2
3 <!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 <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
8 <script type="text/javascript">
9 function validName() {
10 //从登陆名控件上获取输入的名字
11 var name = $("#txt_Name").val();
12 //将名字前后去空格
13 name = $.trim(name);
14 //获取显示信息标签的对象
15 var sp_name = $("#sp_name");
16 if (name.length == 0) {
17 sp_name.html("用户名不能为空");
18 return;
19 }
20 else {
21 $.ajax(
22 {
23 type: "POST",
24 url: "ValidateUserInfo.ashx",
25 datatype: 'json',
26 data: { fun: 'name', name: name },
27 success: function (msg) {
28 //如果data为True证明已存在
29 if (msg == "True") {
30 //将文字设为红色
31 sp_name.css("color", "Red");
32 sp_name.html("该用户名已存在");
33 }
34 else {
35 //将文字设为绿色
36 sp_name.css("color", "Green");
37 sp_name.html("该用户名可用")
38 }
39 },
40 error: function () {
41 alert("网络异常");
42 $("#txt_Name").focus();
43 }
44
45 }
46 );
47 }
48
49 }
50 </script>
51 </head>
52 <body>
53 <form id="form1" runat="server">
54 <div>
55 <input type="text" id="txt_Name" onblur="validName();" />
56 <span id="sp_name" style="color: Red; font-size: 10px;"></span>
57 </div>
58 </form>
59 </body>
60 </html>
一般处理程序代码
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 namespace ValidateUserName
7 {
8 /// <summary>
9 /// ValidateUserInfo 的摘要说明
10 /// </summary>
11 public class ValidateUserInfo : IHttpHandler
12 {
13
14 public void ProcessRequest(HttpContext context)
15 {
16 context.Response.ContentType = "text/plain";
17 string fun = context.Request["fun"].Trim();
18 switch (fun)
19 {
20 case "name":
21 ValidateUserName(context);
22 break;
23 }
24 }
25
26 /// <summary>
27 /// 验证用户名是否存在
28 /// </summary>
29 /// <param name="context"></param>
30 private void ValidateUserName(HttpContext context)
31 {
32 //ajax通过一般处理程序提交的请求 在其中拿到用户输入的用户名
33 string name = context.Request["name"].Trim();
34 //从数据库中验证是否存在,这里省略
35 if (name != "zzz" && name != "xxx" && name != "aaa")
36 {
37 //如果验证不存在,返回页面一个False
38 context.Response.Write("False");
39 }
40 else
41 {
42 //反之返回一个True
43 context.Response.Write("True");
44 }
45 }
46
47 public bool IsReusable
48 {
49 get
50 {
51 return false;
52 }
53 }
54 }
55 }