[原创 修正]JQuery运用ajax注册用户实例

本文通过一个Ajax注册用户实例，学习JQuery在Ajax方面的应用。

//JS代码

function checkname() {
    var Msg = document.getElementById("d_username");
    var chk = CheckN();
    if (chk) {
        $.ajax({ url: 'registerOK.aspx',
            type: 'POST',
            data: { lb: "checkname", username: $("#username").val() },
            dataType: 'html',
            timeout: 1000,
            error: function() { alert('出现未知错误，请与QQ:6434789联系。'); },
            success: function(data) {
                if (data == "对不起，该用户名已被注册！") {
                    Msg.className = "d_err";
                    Msg.innerHTML = data;
                    $("#hiddencheckname").val("no");
                }
                if (data == "恭喜，该用户名可以注册！") {
                    Msg.className = "d_ok";
                    Msg.innerHTML = data;
                    $("#hiddencheckname").val("yes");
                }
                if (data == "该用户名不能为中文！") {
                    Msg.className = "d_err";
                    Msg.innerHTML = data;
                    $("#hiddencheckname").val("no");
                }
                if (data == "请输入用户名！") {
                    Msg.className = "d_err";
                    Msg.innerHTML = data;
                    $("#hiddencheckname").val("no");
                }
            }
        });
    }
}

function CheckN() {
    var Msg = document.getElementById("d_username");
    var chk = true;
    if (checkIsChinese(document.getElementById("username").value)) {
        Msg.className = "d_err";
        Msg.innerHTML = "用户名不能为中文！";
        chk = false;
    }
    if (document.getElementById("username").value.length < 4) {
        Msg.className = "d_err";
        Msg.innerHTML = "用户名不能少于4个字符！";
        chk = false;
    }
    return chk;
}

  function chk_reguser() {
    var chk = true
    //    if (!checkname()) { chk = false; }  //jquery进行变量赋值不能与js里面的变量共用，故success: function(data) {}里面定义的任何变量与所在的js代码中的变量是不相通的，所以我就找一个种比较偏（非正式）的方法，为在html中加入隐藏的Input并在js里面设置$("#hiddencheckname").val("no");
    if (!CheckN()) {chk = false;}
    if ($("#hiddencheckname").val() == "no") { chk = false; }//这个是对其判断
    if (!checkpwd()) { chk = false; }//这些跟CheckN()差不多一样，只是对表单里面的元素进行验证
    if (!checkpwd1()) { chk = false; }
    if (!checkquestion()) { chk = false; }
    if (!checkanswer()) { chk = false; }
    if (!checkxq()) { chk = false; }
    if (!checkrealname()) { chk = false; }
    if (!checktel()) { chk = false; }
    if (!checkQQMSN()) { chk = false; }
    if (!checkEmail()) { chk = false; }
    if (!checkaddress()) { chk = false; }
    if (chk) {
        $.ajax({ url: 'registerOK.aspx',
            type: 'POST',
            data: { lb: "reguser", username: $("#username").val(), password: $("#pwd").val(), question: $("#question").val(), answer: $("#answer").val(), xqcode: $("#ctl00_CPH_Main_DDL_xq").val(), realname: $("#realname").val(), sex: $("input[@name=sex][@checked]").val(), tel: $("#tel").val(), QQMSN: $("#QQMSN").val(), email: $("#email").val(), address: $("#address").val() },
            dataType: 'html',
            timeout: 1000,
            error: function() { alert('出现未知错误，请与QQ:6434789联系。'); },
            success: function(data) {
                if (data == "success") {
                    alert("注册成功！");
                    window.location.href = "/member/index.aspx";
                }
                else {
                    alert("注册失败，原因可能为用户名已被注册！");
                }
            }
        });
        return (true);
    }
    return (false);
}

//HTML页

只要做类似于这样的表单
<input id="username" type="text"  onBlur="checkname()" />
<div class=d_default id=d_username>请输入4位以上的英文字符或数字！</div>
<input id="Button_OK" type="button" onclick="return chk_reguser();"/>

//registerOK.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BLL;

public partial class registerOK : System.Web.UI.Page
{
    user user = new user();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string lb = Request["lb"];
            string username = Request["username"];
            string password = Request["password"];
            string question = Request["question"];
            string answer = Request["answer"];
            string xqcode = Request["xqcode"];
            string realname = Request["realname"];
            string sex = Request["sex"];
            string tel = Request["tel"];
            string QQMSN = Request["QQMSN"];
            string email = Request["email"];
            string address = Request["address"];
            if (lb == "checkname")
            {
                Response.Write(user.CheckUserName(username));
            }
            if (lb == "reguser")
            {
                string name = user.CheckUserName(username);
                if (name == "恭喜，该用户名可以注册！")
                {
                    user.Add(username, password, question, answer, xqcode, realname, sex, tel, QQMSN, email, address);
                    Response.Write("success");
                }
                else
                {
                    Response.Write("fail");
                }
            }
        }
    }
}
注：registerOK.aspx页面必须清空所有的HTML代码，如只剩下<%@ Page Language="C#" AutoEventWireup="true" CodeFile="registerOK.aspx.cs" Inherits="registerOK" %>。