Django基础五之Ajax-一品网
Django基础五之Ajax
Django基础五之Ajax
目录
Django基础五之Ajax1. Ajax介绍 2. Ajax前后端传值2.2 方法二使用Json格式返回 2.3 Ajax 发送POST请求 3. Ajax上传文件 4. Ajax提交Json格式 5. Django内置序列化 6. Ajax结合layer弹窗实现二次确认 7. 分页
1. Ajax介绍
2. Ajax前后端传值
在输入框一和输入框二中分别输入一个数字，然后点提交在第三个输入框中显示结果.
HTML代码:
2.1 方法一HttpResponse直接返回
html页面代码:
views.py代码
from django.shortcuts import render,HttpResponse
def index(request):
if request.method == 'POST': # if request.is_ajax(): 判断是不是ajax请求
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
return HttpResponse(n3)
return render(request, 'index.html')
2.2 方法二使用Json格式返回
上面例子返回的是个数字，如果返回的是多个值，或者是不同的类型，那么就要用json格式传输
2.2.1 HttpResponse 返回json类型
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
#if request.method == 'POST':
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
import json
# 序列化成json类型的字符串
res_dict = json.dumps(res_dict)
return HttpResponse(res_dict)
return render(request, 'index.html')
前端处理Json
2.2.2 JsonResponse返回
views.py
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
# Create your views here.
def index(request):
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
return JsonResponse(res_dict)
return render(request, 'index.html')
前端处理
使用JsonResponse返回的时候，它返回kwargs.setdefault('content_type', 'application/json') 直接返回的为application/json,ajax可以直接转成对象类型.
2.2 方法三使用HttpResponse 返回，但前端不做反序列化
views.py
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
#if request.method == 'POST':
if request.is_ajax():
n1 = request.POST.get('num1')
n2 = request.POST.get('num2')
n3 = int(n1) + int(n2)
res_dict = {'username':'Hans', 'n3':n3}
print(res_dict)
import json
res_dict = json.dumps(res_dict)
return HttpResponse(res_dict)
return render(request, 'index.html')
前端处理
2.3 Ajax 发送POST请求
1. 在和form表单一块用的时候,form表单里不能写button 和input type="submit",因为在form表单里都是提交，和ajax一块用时form提交一次，ajax再提交一次，就会有问题。所以在form表单中使用示例： 利用数据库验证登录用户名和密码，成功跳转到别的网站上，不成功提示验证失败:
HTML代码：
后端代码:
views.py
def login(request):
if request.is_ajax():
name = request.POST.get('username')
pwd = request.POST.get('password')
from lib01 import models
res = models.UserVerfiy.objects.filter(username=name, password=pwd)
print(res)
data_dict = {'status':100, 'msg':None}
if res:
data_dict['msg']="验证成功"
else:
data_dict['status']=101
data_dict['msg'] = "验证失败"
return JsonResponse(data_dict)
return render(request,"login.html")
3. Ajax上传文件
HTTP的POST请求有三种编码格式:
urlencoded: 默认 可以使用request.POST取值
form-data: 上传文件，可以使用request.POST取值
json: ajax发送json格式数据，不可以使用request.POST取值
使用Ajax和form表单，默认都是urlencoded格式
如果上传文件: form表单指定格式(enctype="multipart/form-data")
如果编码方式为urlencoded格式，在body中格式：
user=xxx&password=xxx
使用Ajax上传文件：
views.py
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
def index(request):
if request.is_ajax():
myfile = request.FILES.get('myfile')
print(type(myfile))
with open(myfile.name, 'wb') as f:
for i in myfile:
f.write(i)
return HttpResponse("上传成功")
return render(request, 'index.html')
4. Ajax提交Json格式
使用ajax提交json格式的数据，要指定编码格式：
contentType:'application/json'
在前端指定编码格式，后端收到后要反序列出来，才能使用。
$.ajax({
url:"",
type:"post",
contentType:'application/json', // 指定编码，才能向后端发json格式
//序列化成json格式
filedata = JSON.stringify(name:$('#id1').val(),password:$('id2').val())
data: filedata,
success:function (data){
console.log(data)
}
})
views.py
后端处理，拿到数据后要先反序列化:
import json
# request.get默认是取不出来json格式的。使用request.body来取出：
filedata = request.body
file_json = json.loads(filedata)
name = file_json.get('name')
password = file_json.get('password')
retrun HttpsRespone("OK")
5. Django内置序列化
5.1 内置序列化
把对象转成json格式字符串，目前要做序列化要自己循环，然后拼一个字典，再去序列化成json格式
from django.core import serializers
def book_list(request):
book_list=models.Book.objects.all()
res = serializers.serialize('json', book_list)
return HttpResponse(res)
5.2 批量插入数据
def add_book():
book_list =[]
for i in range(1000):
book=models.Books(name="图书名%s"%i, price="价格%s" %i)
book_list.append(book)
models.Books.objects.bulk_create(book_list,batch_size=100)
# batch_size 每次插入多少
使用faker模块生成测试数据：
pip3 install faker
>>> from faker import Faker
>>> faker = Faker('zh_CN')
>>> print(faker.name())
田岩
>>> print(faker.name())
黄柳
>>> print(faker.address())
云南省婷县锡山汕尾街V座 503156
>>> print(faker.phone_number())
13996473292
>>> print(faker.phone_number())
18959779669
6. Ajax结合layer弹窗实现二次确认
6.1 ajax常用参数
1.url:
2.type:
3.timeout:
4.async:
5.cache:
6.data:
7.dataType:
8.beforeSend： 9.complete：
10.success：
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
11.error:
12.contentType：
13.dataFilter：
14.dataFilter：
15.global：
16.ifModified：
17.jsonp：
18.username：
19.password：
20.processData：
21.scriptCharset：
6.2 弹窗二次确认
先要下载layer，地址:https://github.com/sentsin/layer/releases/download/v3.5.1/layer-v3.5.1.zip
下载后放在项目的static目录，并在settings.py里配置好静态文件目录。
HTML代码:
Title
ID
username
passowrd
edit
{% for foo in userObj %}
{{ foo.id }}
{{ foo.username }}
{{ foo.password }}
删除 /*这里a标签里没有href这是为了去掉它自身带的提交功能，还有个方法是: href="javascript:;"*/
{% endfor %}
