django AJAX 的应用
AJAX 的使用
目录
AJAX简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，
传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
#就是使用js的技术发请求和接收响应的。
AJAX特点：
1. 异步
2. 局部刷新
3. 传输的数据量少
- 页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
- views.py文件
from django.shortcuts import render
from django.http import JsonResponse
def ajax_demo1(request):
return render(request, "ajax_demo1.html")
def ajax_add(request):
i1 = int(request.GET.get("i1"))
i2 = int(request.GET.get("i2"))
ret = i1 + i2
return JsonResponse(ret, safe=False)
- urls.py
from django.conf.urls import url
from app01 import views
urlpatterns = [
...
url(r'^ajax_add/', views.ajax_add),
url(r'^ajax_demo1/', views.ajax_demo1),
...
]
- views.ajax_demo1.heml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AJAX局部刷新实例</title>
</head>
<body>
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1">
<script src="/static/jquery.js"></script>
<script>
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/",
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
success:function (data) {
$("#i3").val(data);
}
})
})
</script>
</body>
</html>
AJAX常见应用情景
搜索引擎根据用户输入的关键字，自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，
然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。
- 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
- 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，
服务器会查询名为用户是否存在，最终服务器返回true表示名为的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。
整个过程中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；
AJAX的优缺点
优点：
AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
jQuery实现的AJAX
最基本的jQuery发送AJAX请求示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ajax test</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<button id="ajaxTest">AJAX 测试</button>
<script>
$("#ajaxTest").click(function () {
$.ajax({
url: "/ajax_test/",
type: "POST",
data: {username: "Q1mi", password: 123456},
success: function (data) {
alert(data)
}
})
})
</script>
</body>
</html>
views.py
def ajax_test(request):
user_name = request.POST.get("username")
password = request.POST.get("password")
print(user_name, password)
return HttpResponse("OK")
$.ajax参数
data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/",
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
success:function (data) {
$("#i3").val(data);
}
})
})
JS实现AJAX
var b2 = document.getElementById("b2");
b2.onclick = function () {
// 原生JS
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("username=q1mi&password=123456");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
};
};
jqery发ajax请求
/* jq发ajax
导入jq
$.ajax({
url：发送的地址，
type: 请求方式，
data: {},
successs: funcation(res){ res ——>响应体
}
}) */
$.ajax({
url: '/calc/',
type: 'post',
data: {
a: $("[name='i1']").val(),
b: $("[name='i2']").val(),
},
success: function (res) {
$("[name='i3']").val(res)
},
error:function (error) {
console.log(error)
}
})
AJAX请求如何设置csrf_token
方式1 通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
//前提条件：确保有csrftoken的cookie
//在页面中使用{% csrf_token %}
//加装饰器 ensure_csrf_cookie
//from django.views.decorators.csrf import csrf_exempt,csrf_protect, ensure_csrf_cookie
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "Q1mi",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
方式2 通过获取返回的cookie中的字符串 放置在请求头中发送。
注意：需要引入一个jquery.cookie.js插件。
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrftoken，并设置到请求头中
data: {"username": "Q1mi", "password": 123456},
success: function (data) {
console.log(data);
}
})
- 或者用自己写一个getCookie方法：
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
- 每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
注意：
"""
如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。
如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
"""
django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def login(request):
pass
- 更多细节详见：Djagno官方文档中关于CSRF的内容
Form表单上传文件
#html
<form action="/upload/" method="post" enctype="multipart/form-data">
{% csrf_token %}
头像: <input type="file" name="head-pic">
用户名: <input type="text" name="username">
<input type="submit">
</form>
#视图函数
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
print(request.POST) #拿到的是post请求的数据,但是文件相关数据需要用request.FILES去拿
print(request.FILES) #<MultiValueDict: {'head-pic': [<InMemoryUploadedFile: 1.png (image/png)>]}>
file_obj = request.FILES.get('head-pic')
print(file_obj)
file_name = file_obj.name
# f = open('xx.txt','rb')
# with open('xx.txt','wb') as f2:
# for i in f:
# f2.write(i)
import os
path = os.path.join(settings.BASE_DIR,'statics','img',file_name)
with open(path,'wb') as f:
for i in file_obj:
f.write(i)
#for chunk in file_obj.chunks():
# f.write(chunk)
return HttpResponse('ok')
AJAX上传文件
/*
上传文件
var formobj = new FormData()
formobj.append(key, $("#f1")[0].files[0] )
$.ajax({
url：发送的地址，
type: 请求方式，
processData: false; // 不处理编码方式
contentType:false; // 不处理请求头
data: formobj ,
successs: funcation(res){ res ——>响应体}
})
*/
// 上传文件示例一
$("#b3").click(function () {
var formData = new FormData();
formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
formData.append("f1", $("#f1")[0].files[0]);
$.ajax({
url: "/upload/",
type: "POST",
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
data: formData,
success:function (data) {
console.log(data)
}
})
})
// 上传文件示例二
<input type="file" id="f1">
<button id="b1">上传 </button>
$('#b1').click(function () {
var formobj = new FormData();
formobj.append('file',document.getElementById('f1').files[0]);
// formobj.append('file',$('#f1')[0].files[0]);
formobj.append('name','alex');
$.ajax({
url: '/upload/',
type: 'post',
data:formobj ,
processData:false, //
contentType:false,
success: function (res) {
$("[name='i3']").val(res)
},
})
})
练习（用户名是否已被注册）
- 功能介绍
- 在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
- #### 案例分析
- 页面中给出注册表单；
- 在username input标签中绑定onblur事件处理函数。
- 当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
- django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，
否则响应“该用户名可以注册”。
解题流程
urls.py
from app01 import views
from django.conf.urls import url
urlpatterns = [
url(r'^login/', views.login), #登录测试页面路由
url(r'^check_user/', views.check_user), #响应AJAX函数路由
]
- models.py
from django.db import models
"""
简单创建一个用户账户信息,用于测试
"""
class User(models.Model):
username = models.CharField(max_length=32, unique=True)
pwd = models.CharField(max_length=32, unique=True)
- views.py 视图函数
from app01 import models
from django.shortcuts import render
from django.http import JsonResponse
def login(request):
return render(request, "login.html")#简单的展示一个登陆页面
def check_user(request): #用来处理AJAX请求
user = request.GET.get("user") #获取AJAX get请求的里的user的值
if models.User.objects.filter(username=user).exists():#判断user的值是否在数据库username字段的值里
return JsonResponse({'status': 1, 'msg': '用户名已存在'})#如果存在返回用户名已存在的提示信息
else:
return JsonResponse({'status': 0, 'msg': '用户名可以使用'})#否则存在返回用户名可以使用的提示信息
- html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
{% csrf_token %}
<p>
注册账户<input type="text" id="user"><span id = "s1"></span>
</p>
<p>
注册密码<input type="text">
</p>
<input type="submit">
<script src = '/static/jquery.js'></script>
<script>
$("#user").blur(function(){
var user = $(this).val();
$.ajax({
url:'/check_user/',
type:'get',
data:{
'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
user:$('#user').val()
},
success:function (res) {
$('#s1').text(res.msg)
}
})
});
</script>
</body>
</html>
- 用户名已存在 执行效果
- 用户可以使用 执行效果
JSON
- 什么是JSON
#在python中来说 json是一个特殊的字符串。 【长的像列表/字典/字符串/数字/真假】
- 用于语言之间的数据转换
- 给出 序列化 / 收入 反序列化
#广义的来说
SON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式 具有自我描述性，更易理解
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
一种数据交换的格式
python
支持的数据类型：字符串、数字、列表、字典、布尔值、None
转化：序列化 josn.dumps(python的数据) josn.dump(python的数据,f)
反序列化 josn.loads(json的字符串) josn.load(json的字符串,f)
js
支持的数据类型：字符串、数字、数组、对象、布尔值、null
转化：
序列化：JSON.stringfy(js的数据类型)
反序列化：JSON.parse(json的字符串
#小知识
django 中使用 'from django.http.response import JsonResponse' 前端页面会识别,并且反序列化
合格的json对象
["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]
#外层必须是列表或字典
#json内部包含字符串必须要用双引号 ""
#外部''
不合格的json对象：
{ name: "张三", 'age': 32 } // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined } // 不能使用undefined
{ "name": "张三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}
Jstringify与parse方法 JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象
JSON.parse('{"name":"alex"}');
JSON.parse('{name:"alex"}') ; // 错误
JSON.parse('[18,undefined]') ; // 错误
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"alex"})
简单了解XML
JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，
不用另外添加解析代码。所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据
#XML
<country>
<name>中国</name>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
</country>
#JSON
{
"name": "中国",
"province": [ {
"name": "台湾",
"cities": {
"city": ["台北", "高雄"]
}
}]
}
#由上面的两端代码可以看出，JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读，并且在数据交换方面，
由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。
Json 序列化时间日期类型的数据的方法
import json
from datetime import datetime
from datetime import date
#对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
def default(self, field):
if isinstance(field,datetime):
return field.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(field,date):
return field.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self,field)
d1 = datetime.now()
dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)
JsonResponse
def index(request):
d1 = {'name':'gkf'}
import json
return HttpResponse(json.dumps(d1)) -- success:function(res){ var a = JSON.parse(res) }
return HttpResponse(json.dumps(d1),content-type='application/json') --success:function(res){res--自定义对象,不需要自己在反序列化了}
return JsonResponse(d1)
d1 = [11,22] #非字典类型的数据都需要加safe=False
return JsonResponse(d1,safe=False)
Django内置的 serializers 序列化
def books_json(request):
book_list = models.Book.objects.all()[0:10]
from django.core import serializers
ret = serializers.serialize("json", book_list)
return HttpResponse(ret)
SweetAlert 结合 AJAX简单使用
页面代码
<script src="/static/sweetalert.min.js"></script>
<script>
$('.btn-danger').click(function () {
swal({
title: "确认删除吗?",
text: "一旦删除，将无法恢复!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
$.ajax({
url: '/del_publisher/' + $(this).attr('del_id') + '/',
success: (res) => {
if (res.status === 0) {
$(this).parent().parent().remove();
swal("删除成功", {
icon: "success",
});
}
}
});
} else {
swal("已取消删除");
}
});
})
</script>
- view.py 视图函数
from app01 import models
from django.http.response import JsonResponse
def delete(request,table,pk):
if hasattr(models,table.capitalize()):
table_class = getattr(models,table.capitalize())
table_class.objects.filter(pk=pk).delete()
return JsonResponse({'status':0})
else:
return JsonResponse({'status':1})
- models.py 表结构
from django.db import models
#出版社
class Publisher(models.Model):
pid = models.AutoField(primary_key=True)
name = models.CharField(max_length=32, unique=True)
- 成功删除 效果演示(数据库也删除此条数据)
- 取消删除 效果演示
$(".btn-danger").on("click", function () {
swal({
title: "你确定要删除吗？",
text: "删除可就找不回来了哦！",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "删除",
cancelButtonText: "取消",
closeOnConfirm: false
},
function () {
var deleteId = $(this).parent().parent().attr("data_id");
$.ajax({
url: "/delete_book/",
type: "post",
data: {"id": deleteId},
success: function (data) {
if (data.status === 1) {
swal("删除成功!", "你可以准备跑路了！", "success");
} else {
swal("删除失败", "你可以再尝试一下！", "error")
}
}
})
});
})
作 者：郭楷丰
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角 【推荐】一下。您的鼓励是博主的最大动力！
自 勉：生活，需要追求；梦想，需要坚持；生命，需要珍惜；但人生的路上，更需要坚强。带着感恩的心启程，学会爱，爱父母，爱自己，爱朋友，爱他人。
django AJAX 的应用的更多相关文章
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
- 关于Django Ajax CSRF 认证
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- python学习-- Django Ajax CSRF 认证
使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...
- django ajax 及批量插入数据 分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
- Django——Ajax
1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- Django ajax提交 登录
一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...
- django ajax报错解决：You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set.
Django版本号:1.11.15 django中ajax请求报错:You called this URL via POST, but the URL doesn't end in a slash a ...
随机推荐
- 【大数据应用技术】作业十一｜分布式并行计算MapReduce
本次作业在要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3319 1.用自己的话阐明Hadoop平台上HDFS和MapRe ...
- Spring Boot-IntelliJ IDEA搭建SpringBoot
点击create new project 点击next 这里基本都已经自动生成了,简单介绍下: Name:项目名称 Type:我们是Maven构建的,那么选择第一个Maven Project Pack ...
- mysql union all limit的使用
To apply ORDER BY or LIMIT to an individual SELECT, place the clause inside the parentheses that enc ...
- (1)PyCharm开发工具安装Flask并创建helloworld程序
一.环境描述 1.操作系统:windows7 2.编程语言:python3.6 下载地址:https://www.python.org/downloads/windows/ 3.虚拟化环境:virtu ...
- openresty开发系列34--openresty执行流程之4访问阶段
openresty开发系列34--openresty执行流程之4访问阶段 访问阶段 用途:访问权限限制 返回403 nginx:allow 允许,deny 禁止 allow ip:deny ip: 涉 ...
- 高级UI-滤镜和颜色通道
滤镜在图片处理里面有很多的运用,尤其是相机使用了大量的滤镜,通过对颜色通道的调和,可以呈现出各种各样的效果 对图像进行一定的过滤加工处理,使用Paint设置滤镜效果 很多高级UI使用时候需要关闭硬件加 ...
- OpenStack-keystone命令行
Keystone简介 Keystone(OpenStack Identity Service)是OpenStack框架中,负责身份验证.服务规则和服务令牌的功能, 它实现了OpenStack的Iden ...
- Linux中DHCP服务器的简单配置（转）
我安装了两台linux系统,一个作为服务器,一个客户端 两个都有3个网卡, 后两个网卡聚合为zhi一个网卡:Linux 网卡聚合 两台电脑都一样. 那么如何为这个聚合网卡进行DHCP的分配呢? 1.由 ...
- 【LeetCode】三数之和【排序，固定一个数，然后双指针寻找另外两个数】
给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 注意:答案中不可以包含重复的三元组. ...
- vm采用NAT方式连接时，设置静态ip
一,共享无线连接或本地连接,给VMnet8. 在网络配置中,选着无线连接,右键属性,共享. 这里默认给虚拟网卡VMnet8,分配了IP:192.168.137.1. 二,在VMware中配置VMnet ...