Django与Ajax
Ajax
Ajax(asynchronous JavaScript And XML):异步javascript和xml。即使用javascript语言与服务器进行异步交互，传输的数据是xml(现在大部分都是使用json)
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
- 异步交互：当客户端发出一个请求后，无需等待服务器响应结束，就 可以发出第二个请求
同步交互
- 浏览器地址栏，默认是get请求
- form表单：get请求，post请求
- a标签，默认是get请求
Ajax(异步交互)：特点
- 异步请求
- 浏览器局部刷新
基于jQuery的Ajax实现
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="/static/jQuery.js"></script>
</head>
<body>
<h2>Index</h2>
<button class="Ajax">ajax</button>
用户名<input type="text" class="inp">
<p></p>
<script>
$('.Ajax').click(function () {
{# 单击按钮发送ajax请求#}
$.ajax({
{#请求url#}
url:"/test_ajax/",
{#发送类型#}
type:'get',
{#发送的数据#}
{#data:{},#}
{#回调函数:某个函数执行结束后执行的函数#}
success:function (data) {
console.log(data);
$('p').html(data)
}
})
} )
</script>
</body>
</html>
文件上传
contnetType
ContentType指的是请求体的编码类型，常见的类型共有3种：
- application/x-www-form-urlencoded
这是最常见的post提交数据的方式。浏览器的原生表单，如果不设置 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=yuan&age=22
- multipart/form-data
使用表单上传文件时，必须让表单的 enctype 等于 multipart/form-data
单也只支持这两种方式（通过 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用的非常少
3. application/json
用来告诉服务端消息主体是序列化后的JSON 字符串，目前json使用的是非常非常多的，很多服务端语言都支持json，在服务端进行处理时需要先编码然后再使用json转换为具体的对象
基于form表单的文件上传
文件上传时需要将form表单的enctype属性设置为multipart/form-data
file_put.html
<form action="" method="post" enctype="multipart/form-data">
用户名<input type="text">
<input type="file">
<input type="submit">
</form>
views.py
def file_put(request):
if request.method == 'GET':
return render(request,'file_put.html')
else:
file_obj = request.FILES.get('img')
print(file_obj) # <MultiValueDict: {'user': [<InMemoryUploadedFile: miao.jpg (image/jpeg)>]}>
with open(file_obj.name,'wb') as f:
for line in file_obj:
f.write(line)
return HttpResponse('OK')
基于Ajax的文件上传
视图函数中处理文件与form处理文件一样
<form action="" method="post" enctype="multipart/form-data">
用户名<input type="text" id="user">
<input type="file" id="img">
<input type="button" id="btn" value="ajax">
</form>
<script>
$('#btn').click(function () {
{#基于ajax上传文件固定格式#}
var formdata = new FormData();
formdata.append('user',$('#user').val());
{# $('#img')[0].files[0] 拿到form表单中的文件#}
formdata.append('img',$('#img')[0].files[0]);
$.ajax({
url:'',
type:'post',
{#是否对数据做预处理 固定写法#}
contentType:false,
processData:false,
data:formdata,
success:function (data) {
console.log(data)
}
})
})
</script>
