一、 基本内容
定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”,即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)
作用:AJAX就是使用 js 技术发送请求和接收响应
优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
-
特点:
- 异步交互
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
- 局部刷新,无须刷新整个页面
- 传输的数据量少,性能高
-
应用场景:
- 搜索引擎根据用户输入的关键字,自动提示检索关键字
- 注册时候的用户名的查重
-
普通示例:页面输入两个整数,通过AJAX传输到后端计算出结果并返回 # urls.py
urlpatterns = [
url(r'^ajax_add/',views.ajax_add),url(r'^ajax_demo1/',views.ajax_demo1),] # views.py
def ajax_demo1(request):
return render(request,"ajax_demo1.html")
def ajax_add(request):
i1 = int(request.GET.get("i1"))
i2 = int(request.GET.get("i2"))
ret = i1 + i2
return JsonResponse(ret,safe=False) {# ajax_demo1.html #}
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1">
<script src="/static/jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click",function () {
$.ajax({
url:"/ajax_add/",type:"GET",data:{"i1":$("#i1").val(),"i2":$("#i2").val()},success:function (data) {
$("#i3").val(data);
},error:function (error) {
console.log(error)
},})
})
</script>
二、 jQuery实现的AJAX
-
最基本的jQuery发送AJAX请求示例 # views.py
def ajax_test(request):
user_name = request.POST.get("username")
password = request.POST.get("password")
print(user_name,password)
return HttpResponse("OK") <button id="ajaxTest">AJAX 测试</button>
<script>
$("#ajaxTest").click(function () {
$.ajax({
url: "/ajax_test/",type: "POST",data: {username: "Q1mi",password: 123456},success: function (data) {
alert(data)
}
})
})
</script>
-
$.ajax参数
-
data参数中的键值对,如果值不为字符串,需要将其转换成字符串类型 <script>
$("#b1").on("click","i2":$("#i2").val(),"hehe": JSON.stringify([1,2,3])},success:function (data) {
$("#i3").val(data);
}
})
})
</script>
三、 AJAX通过csrf的校验
-
前提条件:确保有csrftoken的cookie
- 在页面中使用{% csrf_token %}
- 加装饰器:ensure_csrf_cookie
- 注意:
- 如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值
- 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。
- 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie
-
AJAX请求如何设置csrf_token
- 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送
$.ajax({
url: "/cookie_ajax/",data: {
"username": "Q1mi","password": 123456,{# 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 #}
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
},success: function (data) {
console.log(data);
}
})
- 通过获取返回的cookie中的字符串,放置在请求头中发送
- 注意:需要引入一个jquery.cookie.js插件
$.ajax({
url: "/cookie_ajax/",{# 从Cookie取csrftoken,并设置到请求头中 #}
headers: {"X-CSRFToken": $("[name = 'csrfmiddlewaretoken']").val()},data: {"username": "Q1mi","password": 123456},success: function (data) {
console.log(data);
}
})
- 使用文件:自己写一个getCookie方法
- 粘贴在 static 下的 js 中的 一个js文件 ,比如:ajax_setup.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]);
if (cookie.substring(0,name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// 通过js获取csrftoken的值
var csrftoken = getCookie('csrftoken');
// 使用$.ajaxSetup()方法为ajax请求统一设置
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr,settings) {
// 不是 GET|HEAD|OPTIONS|TRACE 这些请求的话,就执行if后的操作
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken",csrftoken); // 设置请求头,本质同方法2
}
}
});
四、 AJAX上传文件
-
上传文件示例 <input type="file" id="f1">
<button id="b1">上传</button>
<script src="/static/jquery.js"></script>
<script>
$('#b1').click(function () {
var formobj = new FormData();
formobj.append('file',$('#f1')[0].files[0]);
formobj.append('name','alex');
$.ajax({
url: '/upload/',type: 'post',data:formobj,processData:false,contentType:false,success: function (res) {
$("[name='i3']").val(res)
},})
})
</script>
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|