AJAX的簡單示例：注冊校驗

    眾所周知，我們每次需要注冊一個網站的用戶名時，都會校驗該郵箱、用戶名是不是正確的格式、是不是有被使用過，密碼是否符合規則，二次確認是否符合。

如果這些校驗都采用form表單提交的話，會給用戶帶來極不好的體驗（form表單提交會刷新網頁）。

    因此，在此引出ajax的一個作用：局部刷新（用戶看不到的刷新）。下面是用於注冊示例ajax的局部刷新的簡單示例：

 

注冊頁面：

 

 

ajax代碼：

<script>
    {#取得iuputEmail框中的內容#}
    {#inputeamil = $('#i1').val()#}
    {#給郵箱綁定監聽事件（失去焦點）#}
    $("#i1").blur(function () {
        {#隱藏p標簽（作用：當檢驗成功時起作用）#}
        $("#emailTip").hide()
        $.ajax({
            url: "/email_check/",
            type: "get",
            data: {email:$('#i1').val()},
            success: function f(data) {
                {#ajax中的判斷邏輯與python有區別#}
                if (data != "False"){
                    {#alert(data)#}
                    $("#emailTip").show()
                    $("#emailTip").html(data)
                }
        }
        })
    })

    {#檢驗帳號#}
    $("#inputUserName").blur(function () {
        {#隱藏p標簽（作用：當檢驗成功時起作用）#}
        $("#userTip").hide()
        $.ajax({
            url: "/user_check/",
            type: "get",
            data: {user: $('#inputUserName').val()},
            success: function f(data) {
                {#ajax中的判斷邏輯與python有區別#}
                if (data != "False"){
                    {#alert(data)#}
                    {#給p標簽添加文本（html）內容#}
                    $("#userTip").show()
                    $("#userTip").html(data)
                }
        }
        })
    })

    {#檢驗密碼01  #}
    $("#inputPassword1").blur(function () {
        $("#pwdTip1").hide()
        $.ajax({
            url: "/pwd_check1/",
            type: "get",
            data: {pwd1: $('#inputPassword1').val()},
            success: function f(data) {
                {#ajax中的判斷邏輯與python有區別#}
                if (data != "False"){
                    {#alert(data)#}
                    {#給p標簽添加文本（html）內容#}
                    $("#pwdTip1").show()
                    $("#pwdTip1").html(data)
                }
        }
        })
    })

    {#校驗密碼02#}
    $("#inputPassword2").blur(function () {
        $("#pwdTip2").hide()
        $.ajax({
            url: "/pwd_check2/",
            type: "get",
            data: {pwd2: $('#inputPassword2').val(), pwd1:$('#inputPassword1').val()},
            success: function f(data) {
                {#ajax中的判斷邏輯與python有區別#}
                if (data != "False"){
                    {#alert(data)#}
                    {#給p標簽添加文本（html）內容#}
                    $("#pwdTip2").show()
                    $("#pwdTip2").html(data)
                }
        }
        })
    })
</script>

校驗代碼（views）：

# 校驗郵箱
def email_check(request):
    check_email = request.GET.get("email")
    print(check_email)
    if check_email:
        check_ret = models.UserInfo.objects.filter(email=check_email)
        if check_ret:
            return HttpResponse("郵箱地址已被使用！")
        else:
           re_result = re.findall('[a-zA-Z0-9]+@[a-zA-Z0-9\.]+[a-zA-Z]', check_email)
           if re_result:
                return HttpResponse(False)
           else:
               return HttpResponse("郵箱地址格式錯誤！")
    else:
        return HttpResponse("郵箱地址不能為空！")
    # print(email_all)


# 校驗用戶名
def user_check(request):
    check_user = request.GET.get("user")
    print(check_user)
    if check_user:
        check_ret = models.UserInfo.objects.filter(userName=check_user)
        if check_ret:
            return HttpResponse("帳號已被使用！")
        else:
            return HttpResponse(False)
    else:
        return HttpResponse("帳號不能為空！")


# 檢驗密碼
def pwd_check1(request):
    check_pwd1 = request.GET.get("pwd1")
    if not check_pwd1:
        return HttpResponse("密碼不能為空！")
    else:
        pwd1_len = len(check_pwd1)
        re_pwd1 = '^[a-zA-Z][0-9A-Za-z_]+'
        re_result = re.findall(re_pwd1, check_pwd1)
        if re_result:
            if pwd1_len >= 8 and pwd1_len <= 16:
                return HttpResponse(False)
            else:
                return HttpResponse("密碼格式為：字母開頭，含數字字母下划線，長度大於8且小於16")
        else:
            return HttpResponse("密碼格式為：字母開頭，含數字字母下划線，長度大於8且小於16")


# 確認密碼
def pwd_check2(request):
    pwd1 = request.GET.get("pwd1")
    pwd2 = request.GET.get("pwd2")
    print(pwd1, pwd2)
    print(pwd1 == pwd2)
    if pwd1 == pwd2:
        return HttpResponse(False)
    else:
        return HttpResponse("兩次輸入密碼不一致！")

代碼的邏輯適合小白看（比較臃腫），求大神多多指點！