需求：使用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),
]
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")
register.html中代码：
<!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>
login.html中代码：
<!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 中的文件如下：
数据库里：填上几条数据， 用以验证