Django-Ajax
1. Ajax 简介
AJAX
Asynchronous Javascript And XML 翻译成中文就是 “ 异步Javascript和XML ” 。
即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)
javascript
通过javascript来操作,发送HTTP请求到服务端
xml
数据交互使用xml,现在主流使用json格式
xml和json对比
xml:可阅读性比较高,解析复杂,占的空间大
<name>lqz</name>
<age>19</age>
json:可阅读性比较高,解析简单,占的空间小
{"name":"lqz","age":19}
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新 (js的dom操作)
(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
应用场景
优点:
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
2. 基于jquery的Ajax实现
Ajax---->服务器------>Ajax 执行流程图
<button class="send_Ajax">send_Ajax</button>
<script>
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123},
success:function(data){
console.log(data)
},
error: function (jqXHR, textStatus, err) {
console.log(arguments);
},
complete: function (jqXHR, textStatus) {
console.log(textStatus);
},
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments);
},
'400': function (jqXHR, textStatus, err) {
console.log(arguments);
}
}
})
})
</script>
3. ajax 简单使用
案例
# 注意
1. 原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
2. jquery帮咱们封装好了一个方法ajax,我们直接调用jquery的方法,就可以发送ajax的请求
3. 后期,前后端分离,还可以继续使用jquery的ajax, axios更主流一些
4. 现在我们学的jquery的ajax方法的使用
# 示例
1. 需求
通过Ajax,实现前端输入两个数字,服务器做加法,返回到前端页面
2. 模板
$.ajax({
url: '/add/',
method: 'post',
data:{'a':$("#first").val() ,'b':$("#second").val() },
success:function (data) {
//成功触发
},
error:function (error) {
//失败,触发
}
})
# 默认清空下ajax会把{'a':$("#first").val() ,'b':$("#second").val() }数据转成
a=20&b=30,放到body体中 # 预处理数据 编码默认用urlencoded
视图函数
def test_ajax(requests):
n1=int(requests.POST.get('n1'))
n2=int(requests.POST.get('n2'))
return HttpResponse(n1+n2)
js代码
$("#submit").click(function () {
$.ajax({
url: '/test_ajax/',
type: 'post',
data: {
n1: $("#num1").val(),
n2: $("#num2").val()
},
success: function (data) {
console.log(data)
$("#sum").val(data)
},
})
})
模板
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum">
<button id="submit">计算</button>
4. ajax 上传文件
1. 请求头ContentType
1. application/x-www-form-urlencoded
最常见的 POST 提交数据的方式
浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了):
POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
user=lqz&age=22
2. multipart/form-data
常见的 POST 数据提交的方式
我们使用表单上传文件时,必须让 <form> 表单的 enctype 等于 multipart/form-data
直接来看一个请求示例:
POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"
yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
3. application/json
application/json
这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。
JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。
2. 基于Form表单上传文件
1. http请求,body体中放文件内容,ajax本质就是发送http请求,所以它可以上传文件
2. 两种上传文件的方式,form表单,ajax
3. 固定模板
var formdata=new FormData()
formdata.append('myfile',$("#id_file")[0].files[0])
# 还可以带数据
$.ajax({
url:'/uploadfile/',
method: 'post',
//上传文件必须写这两句话
processData:false, # 预处理数据,
contentType:false, # 不指定编码,如果不写contentType,默认用urlencoded
data:formdata, # formdata内部指定了编码,并且自行处理数据
success:function (data) {
console.log(data)
}
})
模板
<form action="/file_put/" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name">
头像:<input type="file" name="avatar" id="avatar1">
<input type="submit" value="提交">
</form>
/* 必须指定 enctype="multipart/form-data" */
视图函数
def file_put(request):
if request.method=='GET':
return render(request,'file_put.html')
else:
# print(request.POST)
# print(request.POST)
print(request.body) # 原始的请求体数据
print(request.GET) # GET请求数据
print(request.POST) # POST请求数据
print(request.FILES) # 上传的文件数据
# print(request.body.decode('utf-8'))
print(request.body.decode('utf-8'))
print(request.FILES)
file_obj=request.FILES.get('avatar')
print(type(file_obj))
with open(file_obj.name,'wb') as f:
for line in file_obj:
f.write(line)
return HttpResponse('ok')
3. 基于Ajax上传文件
js代码
$("#ajax_button").click(function () {
var formdata=new FormData()
formdata.append('name',$("#id_name2").val())
formdata.append('avatar',$("#avatar2")[0].files[0])
$.ajax({
url:'',
type:'post',
processData:false, //告诉jQuery不要去处理发送的数据
contentType:false,// 告诉jQuery不要去设置Content-Type请求头
data:formdata,
success:function (data) {
console.log(data)
}
})
})
5. Ajax提交json格式数据
提交到服务器的数据都在 request.body 里,取出来自行处理
# 模板
$("#ajax_test").click(function () {
var dic={'name':'lqz','age':18}
$.ajax({
url:'',
type:'post',
contentType:'application/json', //一定要指定格式 contentType: 'application/json;charset=utf-8',
data:JSON.stringify(dic), //转换成json字符串格式
success:function (data) {
console.log(data)
}
})
})
# 示例
$.ajax({
url:'/uploajson/', //写全,是什么样就写什么样
method:'post',
contentType: 'application/json',
//data要是json格式字符串
//data:'{"name":"","password":""}',
//把字典转成json格式字符串
//JSON.stringify(dic)
//把json格式字符串转成对象
//JSON.parse(data)
data:JSON.stringify({name:$("#id_name1").val(),password:$("#id_password1").val()}),
success:function (data) {
//返回字符串类型,需要转成js的对象,字典
//1 如果:django 返回的是HttpResponse,data是json格式字符串,需要自行转成字典
//2 如果:django 返回的是JsonResponse,data是就是字典
//ajax这个方法做的是,如果响应数据是json格式,自动反序列化
console.log(typeof data)
var res=JSON.parse(data)
console.log(typeof res)
console.log(res.status)
console.log(res.msg)
}
})
6. django内置序列化器
1. 把对象转成json格式,json.dumps实现不了
2. django内置了一个东西,可以把对象转成json格式
from django.core import serializers
3. 示例
from django.core import serializers
def test(request):
book_list = Book.objects.all()
ret = serializers.serialize("json", book_list) # ret就是json格式字符串
ll=[]
for book in book_list:
ll.append({'name':book.name,'price':book.pirce})
import json
ret=json.dumps(ll)
return HttpResponse(ret)