Django基础五之Ajax
目录
- Django基础五之Ajax
- 1. Ajax介绍
- 2. Ajax前后端传值
- 2.1 方法一HttpResponse直接返回
- 2.2 方法二使用
Json格式返回- 2.2.1 HttpResponse 返回json类型
- 2.2.2 JsonResponse返回
- 2.2 方法三使用HttpResponse 返回，但前端不做反序列化
- 2.3 Ajax 发送POST请求
- 3. Ajax上传文件
- 4. Ajax提交Json格式
- 5. Django内置序列化
- 5.1 内置序列化
- 5.2 批量插入数据
- 6. Ajax结合layer弹窗实现二次确认
- 6.1 ajax常用参数
- 6.2 弹窗二次确认
- 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表单中使用, 要么不用form表单
示例： 利用数据库验证登录用户名和密码，成功跳转到别的网站上，不成功提示验证失败:
HTML代码：