Django(七)---AJAX
AJAX简介
AJAX(Asynchronous Javascript And XML),翻译成中文就是'异步的javascript和XML'
使用javascript语言与服务器进行异步交互,传输的数据为XML
AJAX最大的特点是,可以在不重新加载整个页面的情况下,可以与服务器交换数据,并更新部分网页内容
AJAX不需要任何浏览器插件,但需要用户允许Javascript在浏览器上执行
同步交互:客户端发出一个请求后,需要等待服务器相应结束后,才能发出第二个请求
异步交互:客户端发出一个请求之后,无需等待服务器响应结束,就可以发出第二个请求
ajax基本语法结构
is_ajax()判断当前请求是否是ajax请求,返回布尔值
使用ajax之后,httpresponse都不在作用于页面,而是直接与ajax做交互
$('#d4').on('click',function () {
$.ajax({
url:'', // 数据提交的后端地址 不写就是往当前页面提交 也可以写后缀 也可以写全称 跟actions一样
type:'post', // 提交方式 默认是get请求
data:{'i1':$('#d1').val(),'i2':$('#d2').val()}, // 提交的数据
success:function (data) { // 形参data就是异步提交之后后端返回结果
$('#d3').val(data) // 回调机制需要做的事情
}
})
})
前后端传输数据编码格式
前后端交互之间有一个数据编码格式,对于不用的数据,后端进行不同的处理
如: request.POST和request.FILES 这两种都是用来获取用户传输过来的数据
编码格式(后缀):
1. urlencoded
2. formdata(enctype)
3. application/json格式数据
往后端发送数据方法:
1. a标签通过href携带参数 get请求
2. form表单 get/post
3. ajax get/post
form表单发送数据的编码格式
-
for目标单默认的编码方式的urlencoded
urlencoded所对应的的数据格式:
username=simple&password=123
django后端针对urlencoded数据,会自动解析并且封装到request.POST中
- form表单发送文件时,编码格式是Content-Type: multipart/form-data;
django后端只要数据是满足urlencoded格式,就会自动解析到request.POST中
如果是一个文件对象,django后端也会自动识别,并放入request.FILES中
- form表单无法发送json格式的数据,如果要发送,只能借助于ajax
ajax发送数据的编码格式
ajax能发送的三种格式
1. urlencoded
2. formdata
3. application/json格式数据
ajax通过contentType参数,修改编码格式:
转化成json数据格式
contenType:'application/json
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
ajax默认的编码格式也是urlencoded,后端django也是将数据解析到request.POST中
注意:
在涉及前后端数据交互的时候,数据的格式与编码格式一定要一致
ajax传输json格式数据
后端 前段
dumps stringify
loads parse
通过ajax发送json格式数据,在data
Content-Type: application/json
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
contentType:'application/json', # 1.注意点1
data:JSON.stringify({'username':'jason','password':'123'}), # 2.注意点2
success:function (data) {
alert(123)
}
})
django针对前后传输过来的json数据不会做处理
会直接放入request.body中(二进制的json数据)
Ajax传输文件数据
借助于内置对象 new
该对象即可以携带文件数据 同样也支持普通的键值对
$('#d1').click(function () {
// 先生成一个内置对象
var MyFormData = new FormData();
// 1. 先添加普通的键值
MyFormData.append('username','jason'); // 添加了一组普通的简直对
MyFormData.append('password','123');
// 2. 添加文件数据
MyFormData.append('myfile',$('#d2')[0].files[0]); // 如何获取input框中文件对象$('#d1')[0].files[0]
$.ajax({
url:'',
type:'post',
data:MyFormData, # 1
// 发送文件必须要指定的两个参数
contentType:false, // 不适用任何编码 MyFormData对象内部自带编码 django后端能够识别 #2
processData:false, // 不要处理数据 # 3
success:function (data) {
}
})
})
序列化
序列化将数据整合成一个大字典的形式,方便前后端数据的交互,实现前后端分离
from app01 import models
from django.core import serializers
# 序列化目的 将数据整合成一个大字典形式 方便数据的交互
def zzz(request):
user_queryset = models.User.objects.all()
# [{username:...,password:...,hobby:...,},{},{},{}]
# user_list = []
# for data in user_queryset:
# user_list.append(
# {'username':data.username,
# 'password':data.password,
# 'gender':data.get_gender_display(),
#
# }
# )
res = serializers.serialize('json',user_queryset)
return HttpResponse(res)