12 django_ajax
django_ajax
AJAX（Asynchronous Javascript And XML）“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
ajax项目：
1.用户进入首页，可以点击注册和登录
2.注册页，当输入框失去焦点的时候校验输入的用户名或者手机号存在，存在的话，给出相应提示
3.注册，失败给出相应提示，成功后台将用户数据写入数据库，前端跳转至首页
4.登录，登录失败给出相应提示，成功后跳转至首页
5.实现文件的上传
HTML代码
1 <div class="action"> 2 <div class="panel panel-danger"> 3 <div class="panel-heading">2019进击的菜鸟</div> 4 <div class="panel-body"> 5 web框架开发 6 </div> 7 <div class="panel-body"> 8 crm&爬虫 9 </div> 10 <div class="panel-body"> 11 算法&设计模式&企业应用 12 </div> 13 <div class="panel-body"> 14 vue项目 15 </div> 16 <div class="panel-body"> 17 复习python&自动化&性能 18 </div> 19 </div> 20 <div class="panel panel-warning"> 21 <div class="panel-heading">2020进击的小鸟</div> 22 <div class="panel-body"> 23 fighting! 24 </div> 25 </div> 26 <div class="panel panel-success"> 27 <div class="panel-heading">2021进击的大鸟</div> 28 <div class="panel-body"> 29 go on ! 30 </div> 31 </div> 32 </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> {% block title %} <title>base——title</title> {% endblock title %} <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> {% block style %} <style type="text/css"> *{ padding: 0; margin:0; } .header{ width:100%; height: 50px; background-color: #369; } body{ background:#FFF url('/static/base.jpg') repeat-x 0; background-attachment: fixed; } </style> {% endblock style %} </head> <body> <div class="header"></div> <div class="container"> <div class="row"> <div class="col-md-3"> {% include 'advertise.html' %} </div> <div class="col-md-6"> {% block content%} <h3>base_content</h3> {% endblock %} </div> </div> </div> </body> {% block js %} <script type="text/javascript" src="/static/jquery-3.3.1.js"></script> {% endblock js %} </html>
1 {% extends 'base.html' %} 2 3 4 {% block title %} 5 <title>index</title> 6 {% endblock title %} 7 8 {% block style %} 9 {{ block.super }} 10 <style> 11 img{ 12 margin: 20px auto; 13 } 14 .btn{ 15 margin-right: 20px; 16 } 17 </style> 18 {% endblock style %} 19 20 {% block content %} 21 <h3>欢迎进入首页 {{ word }}</h3> 22 <a href="/app01/regist" class="btn btn-info">注册</a> 23 <a href="/app01/login" class="btn btn-info">登陆</a> 24 <form action=""> 25 <img src="/static/index.jpg"> 26 </form> 27 {% endblock content %}
module6/07 django与ajax/ajax/templates/login.html
1 {% extends 'base.html' %} 2 3 4 {% block title %} 5 <title>index</title> 6 {% endblock title %} 7 8 {% block style %} 9 {{ block.super }} 10 <style> 11 .regist { 12 margin: 20px auto; 13 } 14 .res { 15 margin: 20px auto; 16 font-size: 18px; 17 color: red; 18 } 19 </style> 20 {% endblock style %} 21 22 {% block content %} 23 <h3>登陆页面</h3> 24 <hr> 25 <div class="regist"> 26 <form> 27 <div class="form-group"> 28 <label for="">用户名</label> 29 <input type="text" class="form-control" id="name" placeholder="Name"> 30 </div> 31 <div class="form-group"> 32 <label for="">密码</label> 33 <input type="password" class="form-control" id="pwd" placeholder="Password"> 34 </div> 35 <button type="submit" class="btn btn-success" id="btn">登陆</button> 36 <p class="res"></p> 37 </form> 38 </div> 39 {% endblock content %} 40 41 {% block js %} 42 {{ block.super }} 43 <script type="text/javascript" src="/static/login.js"></script> 44 {% endblock js %}
module6/07 django与ajax/ajax/templates/regist.html
1 {% extends 'base.html' %} 2 3 4 {% block title %} 5 <title>index</title> 6 {% endblock title %} 7 8 {% block style %} 9 {{ block.super }} 10 <style> 11 .regist { 12 margin: 20px auto; 13 } 14 .res{ 15 margin: 20px auto; 16 font-size: 18px; 17 } 18 .success{ 19 color:green; 20 } 21 .error{ 22 color: red; 23 } 24 .check{ 25 color: red; 26 float: right; 27 } 28 </style> 29 {% endblock style %} 30 31 {% block content %} 32 <h3>注册页面</h3> 33 <hr> 34 <div class="regist"> 35 <form> 36 <div class="form-group"> 37 <label for="">用户名</label> 38 <input type="text" class="form-control" id="name" placeholder="Name"> 39 <span class="check"></span> 40 </div> 41 <div class="form-group"> 42 <label for="">昵称</label> 43 <input type="text" class="form-control" id="nickname" placeholder="Nickname"> 44 <span class="check"></span> 45 </div> 46 <div class="form-group"> 47 <label for="">手机号</label> 48 <input type="text" class="form-control" id="phone" placeholder="Phone_no"> 49 <span class="check"></span> 50 </div> 51 <div class="form-group"> 52 <label for="">密码</label> 53 <input type="password" class="form-control" id="pwd" placeholder="Password"> 54 </div> 55 <div class="form-group"> 56 <label for="">确认密码</label> 57 <input type="password" class="form-control" id="confirm_pwd" placeholder="ConfirmPassword"> 58 </div> 59 <button type="submit" class="btn btn-success" id="btn">注册</button> 60 <p class="res"></p> 61 </form> 62 </div> 63 {% endblock content %} 64 65 {% block js %} 66 {{ block.super }} 67 <script type="text/javascript" src="/static/regist.js"></script> 68 {% endblock js %}
module6/07 django与ajax/ajax/templates/file.html
1 {% extends 'base.html' %} 2 3 4 {% block title %} 5 <title>文件</title> 6 {% endblock title %} 7 8 {% block style %} 9 {{ block.super }} 10 <style> 11 .file{ 12 margin:20px auto; 13 } 14 </style> 15 {% endblock style %} 16 17 18 {% block content %} 19 <div class="file"> 20 {# 默认是form表单类型 enctype="application/x-www-form-urlencoded" 传参为 a=1&b=2&c=3 #} 21 {# 上传文件必须要指定类型 enctype="multipart/form-data" 否则不会上传文件，ajax没有这个限制 #} 22 <form action="" method="post" enctype="multipart/form-data"> 23 <div class="form-group"> 24 <label for="">用户名</label> 25 <input type="text" class="form-control" id="fileform" placeholder="Name" name="name"> 26 </div> 27 <div class="form-group"> 28 <label for="">form表单传头像</label> 29 <input type="file" id="form_file" name="imgfile"> 30 </div> 31 <button type="submit" class="btn btn-success" id="form_btn">提交</button> 32 </form> 33 </div> 34 <hr> 35 <div class="file"> 36 <form action="" > 37 <div class="form-group"> 38 <label for="">用户名</label> 39 <input type="text" class="form-control" id="fileajax" placeholder="Name"> 40 </div> 41 <div class="form-group"> 42 <label for="">ajax传头像</label> 43 <input type="file" id="ajax_file"> 44 </div> 45 <button type="submit" class="btn btn-success" id="ajax_btn">提交</button> 46 </form> 47 </div> 48 {% endblock content %} 49 50 {% block js %} 51 {{ block.super }} 52 <script src="/static/file.js"></script> 53 {% endblock js %}
JS代码
jquery自行下载
module6/07 django与ajax/ajax/statics/login.js
1 $(function () { 2 $('#btn').click(function (e) { 3 e.preventDefault(); 4 // var formdata = new FormData(); 表单数据不可以用 FormData 文件才可以 5 var data = {}; 6 data.name = $('#name').val().trim(); 7 data.pwd = $('#pwd').val().trim(); 8 if (data.name && data.pwd) { 9 $.ajax({ 10 url: '', 11 type: 'post', 12 data: data, // ajax默认application/x-www-form-urlencoded格式 13 success: function (data) { 14 data = JSON.parse(data); 15 if (data.user) { 16 location.href = '/app01/index' 17 } else { 18 $('.res').html(data.msg) 19 } 20 } 21 }) 22 } else { 23 alert("用户名或密码不能为空！") 24 } 25 }) 26 27 });
module6/07 django与ajax/ajax/statics/regist.js
1 $(function () { 2 // 鼠标失去焦点校验字符是否已存在 3 check_obj = $('input[type="text"]'); 4 for (var i = 0; i < check_obj.length; i++) { 5 $(check_obj[i]).focus(function () { 6 $(this).next().text(''); 7 }); 8 $(check_obj[i]).blur(function () { 9 data_dic = {}; 10 data_dic.type = this.id; 11 data_dic.value = this.value; 12 $.ajax({ 13 url: '/app01/check/', 14 type: 'post', 15 contentType:"application/json", 16 data: JSON.stringify(data_dic), 17 success: function (data) { 18 var data_json = JSON.parse(data); 19 console.log(data_json); 20 if (data_json['code'] !== '000000') { 21 type_id = '#' + data_dic.type; 22 $(type_id).next().html(data_json['msg']); 23 console.log(data_json); 24 } 25 }, 26 error: function (err) { 27 console.log(err) 28 } 29 }) 30 }); 31 } 32 33 // 注册逻辑 34 $('#btn').click(function (e) { 35 e.preventDefault(); 36 name = $('#name').val().trim(); 37 nickname = $('#nickname').val().trim(); 38 phone = $('#phone').val().trim(); 39 pwd = $('#pwd').val().trim(); 40 confirm_pwd = $('#confirm_pwd').val().trim(); 41 if (name && pwd && confirm_pwd && pwd === confirm_pwd) { 42 var mydata = {}; 43 mydata.name = name; 44 mydata.nickname = nickname; 45 mydata.phone = phone; 46 mydata.pwd = pwd; 47 mydata.confirm_pwd = confirm_pwd; 48 $.ajax({ 49 url: '', 50 type: 'post', 51 data: mydata, 52 success: function (data) { 53 var data_json = JSON.parse(data); 54 if (data_json['code'] === '000000') { 55 $('.res').addClass('success').html(data_json['msg']); 56 location.href = '/app01/index' 57 } else { 58 $('.res').addClass('error').html(data_json['msg']) 59 } 60 }, 61 error: function (err) { 62 console.log(err) 63 } 64 }) 65 } else { 66 alert('用户名和密码不能为空,且密码与确认密码一致！') 67 } 68 }); 69 });
module6/07 django与ajax/ajax/statics/file.js
1 $('#ajax_btn').click(function (e) { 2 e.preventDefault(); 3 // 同form表单文件请求一样，原默认的 application/x-www-form-urlencoded 类型不支持文件上传，需要转换请求参数类型 4 // 文件必须要以 FormData 数据类型传递 5 var formdata = new FormData(); 6 formdata.append('name', $('#fileajax').val()); 7 formdata.append('imgfile', $('#ajax_file')[0].files[0]); 8 $.ajax({ 9 url: '', 10 type: 'post', 11 data: formdata, 12 // 传FormData时 必须设置下面两个参数，不给参数，会报错(js非法输入) 13 processData: false, // 不处理数据，让FormData自己去处理数据 14 contentType: false, // 不设置内容类型，让FormData自己设置内容类型 15 success: function (data) { 16 console.log(data) 17 } 18 }) 19 });
应用app代码
from django.urls import path, re_path from ajax_app01 import views urlpatterns = [ path('index/', views.index), path('login/', views.login), path('regist/', views.regist), path('check/', views.check), path('file/', views.file), ]
1 from django.db import models 2 3 # Create your models here. 4 5 6 class UserDetail(models.Model): 7 id = models.AutoField(primary_key=True) 8 nickname = models.CharField(max_length=32) 9 phone = models.BigIntegerField(null=True) 10 age = models.BigIntegerField(null=True) 11 address = models.CharField(max_length=32,null=True) 12 dep = models.CharField(max_length=32,null=True) 13 14 15 class UserInfo(models.Model): 16 id = models.AutoField(primary_key=True) 17 name = models.CharField(max_length=16) 18 password = models.CharField(max_length=16) 19 user_detail = models.OneToOneField(to=UserDetail, on_delete=models.CASCADE)
module6/07 django与ajax/ajax/ajax_app01/views.py
1 from django.shortcuts import render, HttpResponse 2 from ajax_app01.models import * 3 from django.db.models import Q 4 import json 5 6 # Create your views here. 7 8 9 def regist(request): 10 method = request.method 11 if method == 'POST': 12 name = request.POST.get('name') 13 pwd = request.POST.get('pwd') 14 nickname = request.POST.get('nickname') 15 phone = request.POST.get('phone') 16 select_res = UserInfo.objects.filter(Q(name=name)|Q(user_detail__nickname=nickname)).exists() 17 res = {"code":None,"msg":None} 18 if select_res: 19 res["code"]="100000" 20 res["msg"]="用户已存在!" 21 else: 22 detail = UserDetail.objects.create(nickname=nickname, phone=phone) 23 UserInfo.objects.create(name=name, password=pwd, user_detail=detail) 24 res["code"] = "000000" 25 res["msg"] = "注册成功!" 26 return HttpResponse(json.dumps(res)) 27 else: 28 return render(request, 'regist.html') 29 30 31 def index(request): 32 return render(request, 'index.html') 33 34 35 def login(request): 36 if request.method == 'POST': 37 name = request.POST.get('name') 38 pwd = request.POST.get('pwd') 39 select_res = UserInfo.objects.filter(name=name,password=pwd).exists() 40 res = {"user":None,"msg":None} 41 if select_res: 42 res["user"] = name 43 else: 44 res["msg"] = "用户名或密码错误！" 45 return HttpResponse(json.dumps(res)) 46 return render(request, 'login.html') 47 48 49 def check(request): 50 method = request.method 51 if method == 'POST': 52 dic = {'name':'用户名','nickname':'用户昵称','phone':'手机号'} 53 print(request.body) # 原始的请求体数据 不管啥类型的请求数据都取的到 54 print(request.POST) # POST请求数据 if contentType==urlencoded ,request.POST才有数据 55 req_data = json.loads(request.body.decode('utf8')) 56 type = req_data['type'] 57 value = req_data['value'] 58 if type == 'name': 59 res = UserInfo.objects.filter(name=value).exists() 60 elif type == 'nickname': 61 res = UserInfo.objects.filter(user_detail__nickname=value).exists() 62 else: 63 res = UserInfo.objects.filter(user_detail__phone=value).exists() 64 if res: 65 return HttpResponse('{"code":"100000","msg":"%s已存在！"}'%dic[type]) 66 else: 67 return HttpResponse('{"code":"000000","msg":"校验成功！"}') 68 else: 69 return render(request, 'index.html') 70 71 72 def file(request): 73 import os 74 from ajax.settings import STATICFILES_DIRS 75 if request.method == 'POST': 76 if request.is_ajax(): 77 print('--------------------------ajax--------------------------') 78 print(request.body) # 原始的请求体数据 79 print(request.GET) # GET请求数据 80 print(request.POST) # POST请求数据 if contentType==urlencoded ,request.POST才有数据 81 print(request.FILES) # 上传的文件数据 82 file_obj = request.FILES.get('imgfile') 83 with open(os.path.join(STATICFILES_DIRS[0],file_obj.name), 'wb') as f: 84 for line in file_obj: 85 f.write(line) 86 else: 87 print('--------------------------form--------------------------') 88 print(request.body) # 原始的请求体数据 89 print(request.GET) # GET请求数据 90 print(request.POST) # POST请求数据 if contentType==urlencoded ,request.POST才有数据 91 print(request.FILES) # 上传的文件数据 92 file_obj = request.FILES.get('imgfile') 93 with open(os.path.join(STATICFILES_DIRS[0],file_obj.name), 'wb') as f: 94 for line in file_obj: 95 f.write(line) 96 return HttpResponse('OJBK!') 97 return render(request, 'file.html')
项目代码
""" Django settings for ajax project. Generated by 'django-admin startproject' using Django 2.2.3. For more information on this file, see https://docs.djangoproject.com/en/2.2/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/2.2/ref/settings/ """ import os # Build paths inside the project like this: os.path.join(BASE_DIR, ...) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = '#2jnwyw8s+e-va299kxg7iv#+7weu#d(@i610-f5cxrvqmx%&e' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'ajax_app01', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', # 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] ROOT_URLCONF = 'ajax.urls' TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] WSGI_APPLICATION = 'ajax.wsgi.application' # Database # https://docs.djangoproject.com/en/2.2/ref/settings/#databases # DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), # } # } # Password validation # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [ { 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', }, { 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', }, { 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', }, { 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', }, ] # Internationalization # https://docs.djangoproject.com/en/2.2/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = True # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/2.2/howto/static-files/ STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'statics') ] DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME':'ajax',# 要连接的数据库，连接前需要创建好 'USER':'root',# 连接数据库的用户名 'PASSWORD':'root',# 连接数据库的密码 'HOST':'127.0.0.1',# 连接主机，默认本级 'PORT':3306 # 端口 默认3306 } } LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': { 'console':{ 'level':'DEBUG', 'class':'logging.StreamHandler', }, }, 'loggers': { 'django.db.backends': { 'handlers': ['console'], 'propagate': True, 'level':'DEBUG', }, } }
1 """ajax URL Configuration 2 3 The `urlpatterns` list routes URLs to views. For more information please see: 4 https://docs.djangoproject.com/en/2.2/topics/http/urls/ 5 Examples: 6 Function views 7 1. Add an import: from my_app import views 8 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 Class-based views 10 1. Add an import: from other_app.views import Home 11 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 Including another URLconf 13 1. Import the include() function: from django.urls import include, path 14 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 """ 16 from django.contrib import admin 17 from django.urls import path, re_path, include 18 19 urlpatterns = [ 20 path('admin/', admin.site.urls), 21 re_path(r'^app01/', include(('ajax_app01.urls','ajax_app01'))), 22 ]
import pymysql pymysql.install_as_MySQLdb()
夕闻道不如朝闻道
