使用ajax 做注册登录示例，

最新推荐文章于 2021-03-10 14:49:23 发布

weixin_30725467

最新推荐文章于 2021-03-10 14:49:23 发布

阅读量843

点赞数

文章标签：数据库 python

原文链接：http://www.cnblogs.com/lx3822/p/9239547.html

版权

需求：使用AJAX 做一个注册登录示例，如用户名已存在，在填写用户名时给与提示。

1:首先创建一个新的django项目。做好配置

在settings.py文件里做好数据库配置：

1. 告诉Django连接那个数据库
            DATABASES = {
                'default': {
                    'ENGINE': 'django.db.backends.mysql',
                    'NAME': 'day30',
                    'HOST': '127.0.0.1',
                    'PORT': 3306,
                    'USER': 'root',
                    'PASSWORD': '123',
                }
            }
2.在settings同目录下的 __init__.py文件导入pymysql:

import pymysql
pymysql.install_as_MySQLdb()

3.后面的html文件会用到bootstrap，和setAjax 所以需要在settings.py文件中配置路径：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static")
]

url 中的代码：

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^register/', views.register),
    url(r'^check_name/', views.check_name),

    url(r'^login/', views.login),
]

url中代码

views中代码：

from django.shortcuts import render, redirect
from app01 import models
from django.http import JsonResponse

# Create your views here.


def register(request):
    return render(request, "register.html")



def check_name(request):
    if request.method == "POST":
        ret = {"code": 0}
        username = request.POST.get("name")
        # 去数据库中查询是否有这个username对应的数据
        is_exist = models.User.objects.filter(name=username)
        if is_exist:
            # 数据库中有这个用户名对应的数据
            # 这个用户名已经存在不能再使用
            ret = {"code": 1, "errMsg": "用户名已存在！"}
        return JsonResponse(ret)



def login(request):
    if request.method == "POST":
        ret = {"code": 0}
        name = request.POST.get("name")
        pwd = request.POST.get("pwd")
        ok = models.User.objects.filter(name=name, pwd=pwd)
        if not ok:
            ret["code"] = 1
            ret["data"] = "用户名或密码错误"
        else:
            ret["data"] = "http://www.luffycity.com"
        return JsonResponse(ret)
    return render(request, "login.html")

views中代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body>

<p>
    用户名：<input type="text" id="i1">
    <span class="error" id="s1"></span>
</p>
<p>
    密码：<input type="password" id="i2">
</p>
<p>
    <button id="b1">注册</button>
</p>

<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/setupAjax.js"></script>
<script>
    $("#i1").on("input", function () {
        $("#s1").text("");
        // 只要i1这个标签失去焦点，我就要 把用户填写的值 往后端发送AJAX请求
        var value = $(this).val();
        $.ajax({
            url: "/check_name/",
            type: "POST",
            data: {name: value},
            success:function (data) {
                console.log(data);
                if (data.code){
                    // 用户名已存在！
                    $("#s1").text(data.errMsg);
                }
            }
        })
    })


</script>
</body>
</html>

register代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>
    用户名：<input type="text" id="i1">
    <span class="error" id="s1"></span>
</p>
<p>
    密码：<input type="password" id="i2">
</p>
<p>
    <button id="b1">登录</button>
</p>

<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/setupAjax.js"></script>
<script>
    $("#b1").click(function () {
        var name = $("#i1").val();
        var pwd = $("#i2").val();
        $.ajax({
            url: "/login/",
            type: "POST",
            data: {name: name, pwd: pwd},
            success:function (data) {
                if (!data.code){
                    // 登陆成功
                    location.href = data.data;
                }
            }
        })
    })
</script>
</body>
</html>

models中代码：

from django.db import models

# Create your models here.

class User(models.Model):
    name = models.CharField(max_length=32)
    pwd = models.CharField(max_length=128)

其中static 中的文件如下：