Ajax：是一个js的技术，发送请求的一种途径
特性： 1.局部刷新 2.异步 3.传输的数据量小
简单实例：
1.不刷新页面去实现input框的计算（异步的实现）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>index</h1> {% csrf_token %} <input type="text" name="i1"> + <input type="text" name="i2"> = <input type="text" name="i3"> <button id="b1">计算</button> <hr> <input type="text" name="i4"> + <input type="text" name="i5"> = <input type="text" name="i6"> <button id="b2">计算</button> <script src="/static/jquery.js"></script> <script> $('#b1').click(function () { $.ajax( { url: '/add/', type: 'post', data: { 'i1': $('[name="i1"]').val(), 'i2': $('[name="i2"]').val(), }, success: function (data) { $('[name="i3"]').val(data) }, } ) }); $('#b2').click(function () { $.ajax( { url: '/add1/', type: 'post', data: { 'i1': $('[name="i4"]').val(), 'i2': $('[name="i5"]').val(), }, success: function (data) { $('[name="i6"]').val(data) }, } ) }); </script> </body> </html>
url(r'^index/', views.index), url(r'^add/', views.add), url(r'^add1/', views.add1),
def index(request): return render(request,'index.html') import time def add(request): i1=request.POST.get('i1') i2=request.POST.get('i2') i3=int(i1)+int(i2) time.sleep(60)#测试异步 return HttpResponse(i3) def add1(request): i1=request.POST.get('i1') i2=request.POST.get('i2') i3=int(i1)+int(i2) return HttpResponse(i3)
总结：
html页面要想提交post请求，必须加{% csrf-token %}或者在index函数加ensure_csrf_cookie装饰器,确保设置的cooki的csrftoken
Ajan请求的格式：
$('#b1').click(function(){
$.ajax(
{
url:'/add/',//处理请求的地址
type:'post',//处理请求的方式
data：{ //获得请求的数据
'i1':$('[name="i1"]').val(),
'i2':$('[name="i2"]').val()
}
success:function(res){//view处理成功后返回的结果，可以为Httpresponse对象（那么res为字符串），也可以为Jsonreaponse（那么res会转化为原格式的数据）
console.log(res)
}
error:function(res){//view处理失败返回的结果
consoloe.log(res)
}
}
)
}
)
2.上传文件//测试ajax传输的数据的实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>index</h1> {% csrf_token %} <button id="b3">参数测试</button> <hr> <input type="file" name="f1"><button id="b4">上传</button> <script src="/static/jquery.js"></script> <script> $('#b3').click(function () { $.ajax( { url: '/test/', type: 'post', data: { 'name': 'alex', 'hobby': JSON.stringify(['抽烟', '喝酒']) }, success: function (res) { console.log(res) }, error: function (res) { console.log(res) } } ) }); $('#b4').click(function () { var file_obj=new FormData();//得到一个formdata对象 file_obj.append('fi',$('[name="f1"]')[0].files[0]);//给对象添加键值对 //写ajax请求 $.ajax( { url:'/upload/',//ajax交给的url地址 type:'post',//提交的方式 data:file_obj,//提交的数据 contentType:false,//不处理提交的contenttyle的请求头 processData:false,//不处理编码方式 success:function (res) {//处理成功后执行的代码，res为view处理完成后的返回值 console.log(res) } } ) }) </script> </body> </html>
url(r'^test/', views.test), url(r'^upload/', views.upload),
import json def test(request): print(request.POST) # return HttpResponse('ok') # int('s') hooby = request.POST.get('hobby') print(hooby, type(hooby)) # ["抽烟","喝酒"] <class 'str'> hooby = json.loads(hooby) print(hooby, type(hooby)) # ['抽烟', '喝酒'] <class 'list'> return JsonResponse({'status': 0, 'data': 'ok'}) def upload(request): fi = request.FILES.get('fi') # 获得file对象 f1 with open(fi.name, 'wb')as f: for chunk in fi.chunks(): f.write(chunk) # print(name,type(name))3黄韶华实习简历.pdf <class 'django.core.files.uploadedfile.InMemoryUploadedFile'> # print(name.chunks)#chunks是一个绑定方法 return HttpResponse('ok')
3.ajax通过csrf校验的方式
方式一：在data中添加csrfmiddlewaretoken的隐藏狂的键值
//前提是必须有{% csrf-token %} $('#b1').click(function () { $.ajax( { url: '/add/', type: 'post', data: { 'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(),//方式一直接往data里面添加隐藏的input框的csrfmiddlewaretoken的值去校验 'i1': $('[name="i1"]').val(), 'i2': $('[name="i2"]').val(), }, success: function (data) { $('[name="i3"]').val(data) }, } ) });
方式二：在请求头headers添加x-csrftoken
$('#b2').click(function () {
$.ajax(
{
url: '/add1/',
type: 'post',
headers:{
'x-csrftoken':$('[name="csrfmiddlewaretoken"]').val(),//方式二，往headers里面添加x-csrf-token的键值
},
data: {
'i1': $('[name="i4"]').val(),
'i2': $('[name="i5"]').val(),
},
success: function (data) {
$('[name="i6"]').val(data)
},
}
)
});
方式三：
直接写一个setupajax文件，====基于x-csrftoken方式，为每一个ajan请求设置x-csrftoken
function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
引入方式：先引入jquery，在引入setupajax文件
<script src="/static/jquery.js"></script> <script src="/static/ajax_setup.js"></script>
{csrf-token}确保该地址有一个csrfmiddlewaretoken去通过校验，如果不想每次都在页面写可以引入一个装饰器ensure_csrf_cookie,确保每次访问的时候cookie都别带csrftoken
from django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def index(request): return render(request, 'index.html')