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.1Content-Type: application/x-www-form-urlencoded;charset=utf-8user=yuan&age=22- multipart/form-data
使用表单上传文件时，必须让表单的 enctype 等于 multipart/form-data
单也只支持这两种方式（通过 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用的非常少
- 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>Django与Ajax
原文地址：https://www.cnblogs.com/wualin/p/10122823.html