Ajax
Ajax准备知识
Ajax介绍
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
Ajax并不是一门新的语言 它其实就是基于JS写的一个功能模块而已。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX 1、AJAX是什么 前端向后端发送请求的方式 2、前端向后端发送请求的方式 1、直接在浏览器地址栏输入URL访问 -->GET 2、点击a标签跳转到指定页面 -->GET 3、form表单 -->GET/POST 4、AJAX -->GET/POST
AJAX的两个关键点：局部刷新，异步请求
JQuery实现Ajax
案例：
页面上有三个input框 一个按钮
用户在前两个框中输入数字 点击按钮保证页面不刷新的情况下将数据发到后端做计算，然后将计算好的结果再发给前端展示到第三个input框中
<script> $('#d1').click(function () { //获取两个框里面的内容，朝后端提交异步请求 //ajax基本语法 $.ajax({ // 1.指定朝哪个后端提交数据 url:'',//控制数据的提交路径 有三种写法 跟form表单的action属性一致 // 2.指定当前请求方式 type:'post', // 3.指定提交的数据 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, // 4.ajax是异步提交，所以需要给一个回调函数来处理返回结果 success:function (data) { // data就是异步提交的返回结果 //将异步提交的结果通过DOM操作渲染到第三个input框里 {$('#i3').val(data)} } })
注意，Ajax提交数据需要把中间件注释掉
def index(request):
if request.method =='POST':
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
# i1,i2是字符串类型，需要先做类型转换
i3 = int(i1) + int(i2)
return HttpResponse(i3)
return render(request,'index.html')
页面展示：
content-type 编码格式
form表单
点开浏览器检查Network 发现form表单传输的数据默认是urlencoded
urlencoded数据格式：
username=jason&password=123
django后端针对该格式的数据 会自动解析并帮你打包到request.POST中
如果提交的是文件
后端获取的只是文件名
formdata数据格式
后端获取的是文件对象
django后端针对符合urlencoded编码格式数据(普通键值对)还是统一解析到request.POST中
而针对formdata文件数据就会自动解析放到request.FILES中
Ajax
Ajax默认的也是urlencoded编码格式
但Ajax还可以发json格式的数据
注意：前后端数据交互 编码格式与数据格式一定要一致，不能骗人家！！！
//发json格式
$('#d2').on('click',function () {
$.ajax({
url:'',
type:'post',
// 修改content-Type参数
contentType:'application/json', //把默认的urlencoded编码格式改成json数据的格式
data:JSON.stringify({'username':'jason','password':123}), // 将数据序列化成json格式字符串
success:function (data) {
alert(data)
}
})
由浏览器检查可知，此时发的就是json数据了
django后端针对json格式数据 并不会做任何的处理，而是直接放在request.body中，需要自己处理二进制的json格式
import json #自己处理json格式数据 json_bytes = request.body #先解码 # json_str = json_bytes.decode('utf-8') #再反序列化 # json_dict = json.loads(json_str) #扩展 json.loads能够自动解码并序列化 json_dict = json.loads(json_bytes) print(json_dict,type(json_dict))
Ajax发送文件：
Ajax有一个内置对象FormData，既发可以普通键值对也可以发文件
// ajax发送文件数据 需要借助于内置对象
$('#d3').click(function () {
// 1 需要先生成一个内置对象
var myFormData = new FormData();
// 2 传普通键值对 当普通键值对较多的时候 我们可以利用for循环来添加
myFormData.append('username','jason');
myFormData.append('password',123);
// 3 传文件
myFormData.append('myfile',$('#i1')[0].files[0]); // 获取input框内部用户上传的文件对象
// 发送ajax请求
$.ajax({
url:'',
type:'post',
data:myFormData,
// 发送formdata对象需要指定两个关键性的参数
processData:false, // 让浏览器不要对你的数据进行任何的操作
contentType:false, // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象
success:function (data) {
alert(data)
}
})
})
由下图可知，此时就可以拿到文件对象和普通键值对了
序列化
Django内置的serializers
前后端交互一般都是一个大字典，后端会给前端写一个接口文档，表明大字典内都有哪些键值对，然后前端根据字典就可以取到想要的值。
那么这个时候，就可以用Django给我们提供的序列化方式 serializers
#导入内置序列化模块 from django.core import serializers def ab_se(request): #拿到用户表里面的所有的用户对象 user_queryset = models.Userinfo.objects.all() #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据 res = serializers.serialize('json',user_queryset) # return render(request,'ab_se.html',locals()) ''' or ''' return HttpResponse(res)
