目录
0、设置随机数字验证码(补充)
code.py
1、Ajax请求
通常我们浏览器发送的GET、POST请求都会造成页面刷新,而使用Ajax请求就会在浏览器不刷新的情况下也能更新数据。
2、Ajax测试示例(1)
(1)、DOM按钮绑定事件
urls.py
from app01.views import depart,user,pretty,admin,account,task
#------------------任务管理---------------------------------------------------
path('task/list/', task.task_list),
views->task.py
from django.shortcuts import render,redirect
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
task_list.html
{
% extends "template.html" %}
{
% block content %}
<div class="container">
<h1>任务管理</h1>
<h3>示例1</h3>
<input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
function clickMe(){
console.log("点击了按钮");
}
</script>
{
% endblock %}
修改模板template.html
访问页面
(2)、GET请求测试
urls.py
path('task/ajax/', task.task_ajax),
task,py
from django.shortcuts import render,redirect,HttpResponse
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
def task_ajax(request):
print(request.GET)
return HttpResponse("成功了")
task_ajax.html
{
% extends "template.html" %}
{
% block content %}
<div class="container">
<h1>任务管理</h1>
<h3>示例1</h3>
<input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
function clickMe(){
$.ajax({
url:'/task/ajax/',
type:"get",
data:{
n1:123,
n2:456
},
sucess:function (res){
console.log(res);
}
})
}
</script>
{
% endblock %}
访问:
(3)、POST请求测试
直接修改type会发生报错,因为没有验证cookie中的csrftoken
这里采用直接避免验证的方式进行post请求的访问
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
@csrf_exempt
def task_ajax(request):
print(request.GET)
print(request.POST)
return HttpResponse("成功了")
task_list.html
{
% extends "template.html" %}
{
% block content %}
<div class="container">
<h1>任务管理</h1>
<h3>示例1</h3>
<input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
function clickMe(){
$.ajax({
url:'/task/ajax/',
type:"post",
data:{
n1:123,
n2:456
},
sucess:function (res){
console.log(res);
}
})
}
</script>
{
% endblock %}
再次访问显示成功
(4)、JQuery按钮绑定事件
{
% block js %}
<script type="text/javascript">
$(function () {
//页面框架加载完成之后代码自动执行
bindBtn1Event();
})
function bindBtn1Event() {
$("#btn1").click(function () {
$.ajax({
url: '/task/ajax/',
type: "post",
data: {
n1: 123,
n2: 456
},
sucess: function (res) {
console.log(res);
}
})
})
}
</script>
{
% endblock %}
(5)、Ajax请求的返回值(后台数据传输到前端)
一般为JSON形式。
方法1:
import json
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
@csrf_exempt
def task_ajax(request):
print(request.GET)
print(request.POST)
data_dict = {
"status":True,
"data":[1,2,3,4]
}
json_string = json.dumps(data_dict)
return HttpResponse(json_string)
方法2:
import json
from django.http import JsonResponse
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
@csrf_exempt
def task_ajax(request):
print(request.GET)
print(request.POST)
data_dict = {
"status":True,
"data":[1,2,3,4]
}
#json_string = json.dumps(data_dict)
#return HttpResponse(json_string)
return JsonResponse(data_dict)
因为返回给前端的是字符串,处理起来比较麻烦,所以在前端拿到数据要进行反序列化处理,将数据类型设为JSON
直接获取前端值
访问页面
3、Ajax测试示例(2)前端数据传输到后台
示例:bindBtn2Event
{
% extends "template.html" %}
{
% block content %}
<div class="container">
<h1>任务管理</h1>
<h3>示例1</h3>
<input type="button" id="btn1" class="btn btn-primary" value="点击"/>
<h3>示例2</h3>
<input type="text" id="txtName" placeholder="姓名"/>
<input type="text" id="txtAge" placeholder="年龄"/>
<input id="btn2" type="button" class="btn btn-primary" value="提交">
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
$(function () {
//页面框架加载完成之后代码自动执行
bindBtn1Event();
bindBtn2Event();
})
function bindBtn1Event() {
$("#btn1").click(function () {
$.ajax({
url: '/task/ajax/',
type: "post",
data: {
n1: 123,
n2: 456
},
dataTypes: "JSON",
sucess: function (res) {
console.log(res);
console.log(res.status);
console.log(res.data);
}
})
})
}
function bindBtn2Event() {
$("#btn2").click(function () {
$.ajax({
url: '/task/ajax/',
type: "post",
data: {
name:$("#txtName").val(),
age:$("#txtAge").val(),
},
dataTypes: "JSON",
sucess: function (res) {
console.log(res);
console.log(res.status);
console.log(res.data);
}
})
})
}
</script>
{
% endblock %}
后台:
import json
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
@csrf_exempt
def task_ajax(request):
print(request.GET)
print(request.POST)
data_dict = {
"status":True,
"data":[1,2,3,4]
}
json_string = json.dumps(data_dict)
return HttpResponse(json_string)
输出
4、Ajax测试示例(3)(使用form表单)
当提交的数据过多时,也可使用表单提交
<h3>示例3</h3>
<form id="form3">
<input type="text" name="name" placeholder="姓名"/>
<input type="text" name="age" placeholder="年龄"/>
<input type="text" name="email" placeholder="邮箱"/>
<input type="text" name="more" placeholder="个人介绍"/>
</form>
<input id="btn3" type="button" class="btn btn-primary" value="发送">
事件绑定并打包数据
前端
后台
import json
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt
def task_list(request):
"""任务列表"""
return render(request,"task_list.html")
@csrf_exempt
def task_ajax(request):
print(request.GET)
print(request.POST)
data_dict = {
"status":True,
"data":[1,2,3,4]
}
json_string = json.dumps(data_dict)
return HttpResponse(json_string)
输出
5、Ajax项目实例(连接数据库)
(1)创建一张任务表
models.py
class Task(models.Model):
"""任务"""
level_choices = (
(1, "紧急"),
(2, "重要"),
(3, "临时"),
)
level = models.SmallIntegerField(verbose_name="级别",choices=level_choices,default=1)
title = models.CharField(verbose_name="标题",max_length=64)
detail = models.TextField(verbose_name="详细信息")
user = models.ForeignKey(verbose_name="负责人",to="Admin",on_delete=models.CASCADE)
运行manage.py
makemigrations
migrate
(2)查看数据库
(3)修改管理员表将对象显示成文字
models.py
class Admin(models.Model):
"""管理员"""
username = models.CharField(verbose_name="用户名", max_length=32)
password = models.CharField(verbose_name="密码", max_length=64)
#当输出该类的对象时,显示对象名字
def __str__(self):
return self.username
(4)为task表创建ModelForm
form,py
class TaskModelForm(BootStrapModelForm):
class Meta:
model = models.Task
fields = "__all__"
widgets = {
"detail":forms.TextInput,
#"detail": forms.Textarea,
}
(5)创建发送Ajax请求的网址
urls.py
path('task/add/', task.task_add),
(6)创建和修改视图函数
task.py
import json
from django.http import JsonResponse
from django.shortcuts import render, redirect, HttpResponse
from django.views.decorators.csrf import csrf_exempt
from app01.utils.form import TaskModelForm
def task_list(request):
"""任务列表"""
form = TaskModelForm()
return render(request, "task_list.html", {
"form": form})
@csrf_exempt
def task_ajax(request):
print(request.GET)
print(request.POST)
data_dict = {
"status": True,
"data": [1, 2, 3, 4]
}
json_string = json.dumps(data_dict)
return HttpResponse(json_string)
@csrf_exempt
def task_add(request):
"""添加任务"""
#print(request.POST)
# <QueryDict: {'level': ['1'], 'title': ['111'], 'detail': ['11'], 'user': ['1']}>
# 1、对用户发送的数据表单进行校验(此处使用ModelForm进行校验)
form = TaskModelForm(data=request.POST)
if form.is_valid():
form.save()
data_dict = {
"status": True}
return JsonResponse(data_dict)
data_dict = {
"status": False,
"error": form.errors
}
return JsonResponse(data_dict)
(7)修改网页格式与Ajax事件绑定
task_list.html
{
% extends "template.html" %}
{
% block content %}
<div class="container">
<!--实际案例-->
<div class="panel panel-default">
<div class="panel-heading">表单</div>
<div class="panel-body">
<form id="formAdd">
<div class="clearfix"><!--与栅格连用-->
{
% for obj in form %}
<div class="col-xs-6"><!--栅格为6-->
<div class="form-group" style="position: relative;margin-bottom: 20px;">
<label> {
{
obj.label }} </label>
{
{
obj }}
<span class="error-msg" style="color:red;position: absolute;"></span>
</div>
</div>
{
% endfor %}
<div class="col-xs-6">
<button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
</div>
</div>
</form>
</div>
</div>
<!--学习样例-->
<hr/>
<h1>Ajax学习</h1>
<h3>示例1</h3>
<input type="button" id="btn1" class="btn btn-primary" value="点击"/>
<h3>示例2</h3>
<input type="text" id="txtName" placeholder="姓名"/>
<input type="text" id="txtAge" placeholder="年龄"/>
<input id="btn2" type="button" class="btn btn-primary" value="提交">
<h3>示例3</h3>
<form id="form3">
<input type="text" name="name" placeholder="姓名"/>
<input type="text" name="age" placeholder="年龄"/>
<input type="text" name="email" placeholder="邮箱"/>
<input type="text" name="more" placeholder="个人介绍"/>
</form>
<input id="btn3" type="button" class="btn btn-primary" value="发送">
</div>
{
% endblock %}
{
% block js %}
<script type="text/javascript">
$(function () {
//页面框架加载完成之后代码自动执行
//学习案例
bindBtn1Event();
bindBtn2Event();
bindBtn3Event();
//实际案例
bindBtnAddEvent();
})
function bindBtn1Event() {
$("#btn1").click(function () {
$.ajax({
url: '/task/ajax/',
type: "post",
data: {
n1: 123,
n2: 456
},
dataTypes: "JSON",
success: function (res) {
console.log(res);
console.log(res.status);
console.log(res.data);
}
})
})
}
function bindBtn2Event() {
$("#btn2").click(function () {
$.ajax({
url: '/task/ajax/',
type: "post",
data: {
name: $("#txtName").val(),
age: $("#txtAge").val(),
},
dataTypes: "JSON",
success: function (res) {
console.log(res);
console.log(res.status);
console.log(res.data);
}
})
})
}
function bindBtn3Event() {
$("#btn3").click(function () {
$.ajax({
url: '/task/ajax/',
type: "post",
data: $("#form3").serialize(),
dataTypes: "JSON",
success: function (res) {
console.log(res);
}
})
})
}
function bindBtnAddEvent() {
$("#btnAdd").click(function () {
//绑定按钮
$("#btnAdd").click(function () {
$(".error-msg").empty();
})
$.ajax({
url: '/task/add/',
type: "post",
data: $("#formAdd").serialize(),//表单数据
dataTypes: "JSON",
success: function (res) {
console.log(res.status);
if (res.status) {
alert("添加成功");
} else {
console.log(res.error);
$.each(res.error, function (name, data) {
console.log(name.data);
$("#id_" + name).next().text(data[0]);
})
}
}
})
})
}
</script>
{
% endblock %}