主要内容:
- 1.ajax概述
- 2.ajax相关
- 3.上传文件
1.AJAX的概述
- AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
#同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求； #异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
(1)示例:页面输入两个整数，通过AJAX传输到后端计算出结果并返回。
- HTML 代码
<body> {% csrf_token %} <p> <input type="text" name="i1"> <input type="text" name="i2"> <input type="text" name="i3"> <button id="b1">计算</button> </p> <p> <input type="text" name="i4"> <input type="text" name="i5"> <input type="text" name="i6"> <button id="b2">计算</button> <button id="b3">参数的测试</button> </p> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> $('#b1').click(function(){ $.ajax({ url:'/calc/', type:'post', data :{ 'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(), i1:$('[name="i1"]').val(), i2:$('[name="i2"]').val() }, success:function(res){ $('[name="i3"]').val(res) } }) }); $('#b2').click(function(){ $.ajax({ url:'/calc2/', type:'post', headers:{ 'X-csrftoken': $('[name="csrfmiddlewaretoken"]').val(), }, data :{ i1:$('[name="i4"]').val(), i2:$('[name="i5"]').val() }, success:function(res){ $('[name="i6"]').val(res) } }) });
- views.py 代码
from django.shortcuts import render,HttpResponse # from django.views.decorators.csrf import ensure_csrf_cookie # @ensure_csrf_cookie def index(request): return render(request,'index.html') def calc(request): i1 = request.POST.get('i1','') i2 = request.POST.get('i2','') i3 = int(i1)+int(i2) if i1 and i2 else '' return HttpResponse(i3) def calc2(request): i4 = request.POST.get('i1', '') i5 = request.POST.get('i2', '') i6 = int(i4) + int(i5) if i4 and i5 else '' return HttpResponse(i6)
- urls.py 代码
from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^index/', views.index), url(r'^calc/', views.calc), url(r'^calc2/', views.calc2),
(2)ajax优点
- AJAX使用JavaScript技术向服务器发送异步请求；
- AJAX请求无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
2.ajax相关
2.1 发请求的途径
- a标签
- form表单 GET/POST
- 地址栏输入地址回车 GET
2.2参数
注: data参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型
$('#b3').click(function(){
$.ajax({
url:'/ajax_test/',
type:'post',
data:{
name:'倚天屠龙记',
time:'2003',
place:'内地',
actor: JSON.stringify(['苏有朋','高圆圆','张国立','贾静雯'])
},
success:function(res){
alert(res)
}
})
})
js实现AJAX
var b2 = document.getElementById("b2"); b2.onclick = function () { // 原生JS var xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", "/ajax_test/", true); xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlHttp.send("username=q1mi&password=123456"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { alert(xmlHttp.responseText); } }; };
2.3 ajax可以提交POST 请求的方式(如何设置csrf_token)
(1) 在HTML页面中使用 {% csrf_token %}，给POST提交数据中添加 csrfmiddlewaretoken的键值对
data :{
'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(),
i1:$('[name="i1"]').val(),
i2:$('[name="i2"]').val()
},
(2)在HTML页面中使用 {% csrf_token %}，在ajax中添加X-csrftoken的请求头
headers:{
'X-csrftoken': $('[name="csrfmiddlewaretoken"]').val(),
},
(3) 通过获取返回的cookie中的字符串,放置在请求头中发送
# 引入一个 ajax_setup..js的JS文件,放置在静态文件中,然后在页面中引入
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); } } });
注;
- 如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。
- 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。
- 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie
django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass
3.上传文件
- HTML文件代码
<body> <form action="" enctype="multipart/form-data"></form> <input type="file" name = f1> <button id="b1">上传</button> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="/static/js/ajax_setup.js"></script> <script> $('#b1').click(function(){ var form_obj = new FormData(); form_obj.append('f1',$('[name="f1"]')[0].files[0]) $.ajax({ url:'/upload/', type:'post', processData:false, contentType:false, data:form_obj, success:function(){ alert(res) } }) }) </script> </body>
- views.py代码
from django.shortcuts import render,HttpResponse def upload(request): if request.is_ajax(): file_obj = request.FILES.get("f1") with open(file_obj.name,'wb') as f: for i in file_obj.chunks(): f.write(i) return HttpResponse('上传成功') return render(request,'upload.html')
练习 用户名是否已被注册
- html文件
<body> username：<input type="text" name="user"><span></span> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="/static/js/ajax_setup.js"></script> <script> $('[name="user"]').blur(function(){ $.ajax({ url:'/check/', type:'post', data:{ user:$('[name="user"]').val() }, success:(res)=>{ $(this).next().text(res.status_content) } }) }).focus(function(){ $(this).next().text('') }) </script> </body>
- views.py
from app01 import models def register(request): return render(request, 'register.html') def check(request): # 获取到从页面提交的注册名 register_name = request.POST.get('user') if not register_name: return JsonResponse({'status': 0, 'status_content': '用户名不能为空'}) else: ret = models.User.objects.filter(name=register_name) if ret: return JsonResponse({'status': 0, 'status_content': '用户名已存在'}) else: return JsonResponse({'status': 1, 'status_content': '用户名可以使用'})
- urls
url(r'^register/', views.register), url(r'^check/', views.check),