【Django】AJAX -- 2019-08-07 10:44:18
目录
原创: http://106.13.73.98/__/42/ @ from django.views.decorators.csrf import csrf_exempt,csrf_protect # csrf_exempt:给指定视图排除csrf校验 csrf_protect:指定某个视图必须csrf校验 # 注意:如果时CBV,则必须装饰到dispatch方法上 使用ensure_csrf_cookie()装饰器可以强制设置csrf到Cookie: django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass DJango内置的序列化方法: from django.core import serializers def user_list(request): user_list = models.Userinfo.objects.all() ret = serializers.serialize('json',user_list) return HttpResponse(ret) JSON什么是JSON?
==JSON使用JavaScript语法来描述数据对象,但是JSON仍然独立于语言和平台==。JSON解释器和JSON库支持许多不同的编程语言. 合格的json对象: ['one','two','three'] {'one': 1,'two': 2,'three': 3} {'users': ['zyk01','zyk02']} [{'user': 'zyk'},{'sex': 'boy'}] 不合格的json对象: """属性名必须使用引号(反序列化后是双引号)""" {name: 'zyk','sex': 'oby'} """不能使用十六进制值""" [16,32,64,128,0xFFF] """不能使用undefined""" {'name': 'zyk','age': undefined} """不能使用日期对象""" {'name': 'zyk','birthday': new Date('Fri,26 Aug 2011 07:13:10 GMT' """不能使用函数""" {'getName': function() {return this.name;},'sex': 'boy'} 序列化 stringifyJavaScript中使用JSON的stringily方法进行序列化 *** 反序列化 parseJavaScript中使用JSON的parse方法进行反序列化 *** JSON与XML对比JSON格式于2001年由Douglas Crockford提出,目的就是取代繁琐笨重的XML格式。 JSON格式有两个显著的优点:==书写简单、一目了然==;符合JavaScript原生语法,可以由解释引擎直接处理,不用另外添加解析代码。 因此,JSON迅速被接受,已经成为各大网络交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。 对比: <?xml version="1.0" encoding="utf-8"?> <country> <name>中国</name> <province> <name>黑龙江</name> <cities> <city>哈尔滨</city> <city>大庆</city> </cities> </province> <province> <name>广东</name> <cities> <city>广州</city> <city>深圳</city> <city>珠海</city> </cities> </province> <province> <name>台湾</name> <cities> <city>台北</city> <city>高雄</city> </cities> </province> <province> <name>新疆</name> <cities> <city>乌鲁木齐</city> </cities> </province> </country> 用JSON表示如下: { "name": "中国","province": [{ "name": "黑龙江","cities": { "city": ["哈尔滨","大庆"] } },{ "name": "广东","cities": { "city": ["广州","深圳","珠海"] } },{ "name": "台湾","cities": { "city": ["台北","高雄"] } },{ "name": "新疆","cities": { "city": ["乌鲁木齐"] } }] } 由上面的两端代码可以看出,JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读,并且在数据交换方面,由于JSON所使用的字符要比XML少得多,可以大大得节约传输数据所占用得带宽。 AJAX简介AJAX(Asynchronous Javascript And XML)翻译成中文就是"==异步的Javascript和XML=="。即使用JavaScript语言与服务器进行交互,传输的数据为XML(当然,传输的数据不只是XML)。 AJAX不是新的编程语言,而是一种使用现有标准的新方法. ==AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.== AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
HTML页面代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="/static/jquery-3.3.1.js"></script> <title>AJAX局部刷新实例</title> </head> <body> <input type="text" id="sign01"> + <input type="text" id="sign02"> = <input type="text" id="sign03"> <input type="button" value="计算" id="tag"> <script> $('#tag').click(function () { {# 'click'是鼠标点击事件 #} $.ajax({ url: '/ajax_add/',{# 请求的url地址 #} type: 'GET',{# 请求方式 #} 'data': { sign01: $('#sign01').val(),'sign02': $('#sign02').val() },{# 发送的数据 #} success: function (res) { $('#sign03').val(res); },{# 回调函数(执行成功时被调用) res:返回的数据 #} }); }); {# 里面所有的key都可以写成字符串 #} </script> </body> </html> 视图页面代码: from django.shortcuts import render from django.http import JsonResponse def ajax_demol(request): return render(request,'ajax_demol.html') # 计算功能 def ajax_add(request): sign01 = request.GET.get('sign01') sign02 = request.GET.get('sign02') sign03 = int(sign01) + int(sign02) return JsonResponse(sign03,safe=False) # JsonResponse方法默认只允许序列化dict类型的数据. # safe=False:将安全参数设置为False后,才可允许序列化非dict类型的数据. urls页面配置: from century01 import views urlpatterns = [ url(r'^ajax_demol/$',views.ajax_demol),url(r'^ajax_add/$',views.ajax_add),] AJAX常见应用场景搜索引擎根据用户输入的关键字,自动提示检索关键字。 还有一个很重要的应用场景就是注册时用户名的查看。 其实这里就使用了AJAX技术,当文件框发生输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。
当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。
<script> $('#sign').on('click',function () { {# 'click'是鼠标点击事件 #} $.ajax({ {# 请求的URL地址 #} url: '/ajax_test/',{# 请求的类型 #} type: 'POST',{# 要发送的数据 #} data: { 'name': 'zyk',{# 如果不是字符串则需要序列化 #} 'hobby': JSON.stringify(['AJAX','Django','Python']),},{# 回调函数(成功时执行) data:服务器返回的数据 #} success: function (data) { $('#sign00').val(data); },{# 回调函数(出错时执行) data:服务器返回的数据 #} error: function (data) { alert('error'); },}); }); </script> jQuery实现AJAX最基本的jQuery发送AJAX请求示例: HTML文件代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <script src="/static/jquery-3.3.1.js"></script> <title>AJAX 测试</title> </head> <body> <button id="ajaxTest">AjAX 测试</button> <script> $('#ajaxTest').click(function () { {# 'click'是鼠标点击事件 #} $.ajax({ # asynchronous: false,{# ajax请求默认是异步执行的,可设置此参数为false,让其同步执行 #} url: '/ajax_test/',{# 请求的url地址 #} type: 'POST',{# 请求的方式 #} data: { user: 'zyk',pwd: '[email?protected]',{# 发送的数据 #} success: function (data) { {# 弹出警告框 #} alert(data) },{# 回调函数(执行成功时被调用) data:返回的数据 #} }); }); </script> </body> </html> 视图文件代码: from django.shortcuts import render,HttpResponse from century01 import models def ajax_test(request): if request.method == 'POST': user = request.POST.get('user') pwd = request.POST.get('pwd') ret = 'is ok' if models.Userinfo.objects.filter(name=user,pwd=pwd) else 'is no' return HttpResponse(ret) return render(request,'ajax_test.html') JS实现AJAX<script> 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); } }; }; </script> AJAX请求设置csrf_token视图文件代码如下: from django.shortcuts import render,HttpResponse from century01 import models def ajax_test(request): if request.method == 'POST': user = request.POST.get('user') pwd = request.POST.get('pwd') ret = 'is ok' if models.Userinfo.objects.filter(name=user,'ajax_test.html') 方法一通过获取隐藏的input标签中的csrfmiddlewaretoken的值,==放到data中发送==. <body> {% csrf_token %} <button id="ajaxTest">AjAX 测试</button> <script> $('#ajaxTest').click(function () { $.ajax({ url: '/ajax_test/',pwd: '[email?protected]',// 获取隐藏的input标签中的csrfmiddlewaretoken的值 csrfmiddlewaretoken: $("[name = 'csrfmiddlewaretoken']").val() },{# 发送的数据 #} success: function (data) { {# 弹出警告框 #} alert(data); },{# 回调函数(执行成功时被调用) data:返回的数据 #} }); }); </script> </body> 方法二通过获取隐藏的input标签中的csrfmiddlewaretoken的值,==放置在请求头中发送==. <body> {% csrf_token %} <button id="ajaxTest">AjAX 测试</button> <script> $('#ajaxTest').click(function () { $.ajax({ url: '/ajax_test/',type: 'POST',// 获取隐藏的input标签中的csrfmiddlewaretoken的值 headers: {'X-CSRFToken': $('[name="csrfmiddlewaretoken"]').val(),data: { user: 'zyk',pwd: '[email?protected]'},success: function (data) { alert(data); },}); }); </script> </body> 方法三或者自己写一个getCookie方法的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); } } }); 然后在网页文件中直接导入上面的js文件即可: <body> {% csrf_token %} <button id="ajaxTest">AjAX 测试</button> // 导入上面的文件: <script src="/static/ajax_setup.js"></script> <script> $('#ajaxTest').click(function () { $.ajax({ url: '/ajax_test/',pwd: '[email?protected]'},}); }); </script> </body> 注意: 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。 这个时候需要使用ensure_csrf_cookie()装饰器强制设置csrf到Cookie: django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass 更多细节详见:Django官方文档中关于CSRF的内容 AJAX其它实例上传文件实例视图函数: from django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie # 强制设置csrf到Cookie def upload(request): # 判断是否为ajax请求 if request.is_ajax(): print(123) file = request.FILES.get('file') with open(file.name,'wb') as f: [f.write(i) for i in file.chunks()] return HttpResponse('is ok') return render(request,'upload.html') body标签: <body> <input type="file" id="my_file"> <button id="tag">上传</button> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/ajax_setup.js"></script> // 导入自己写的getCookie方法的js文件 <script> $('#tag').click(function () { var form_obj = new FormData; form_obj.append('file',$('#my_file')[0].files[0]); $.ajax({ url: '/upload/',type: 'post',processData: false,// contentType: false,// data: form_obj,success: function (res) { alert(res); },}); }); </script> </body> 判断用户名是否已被注册网页文件如下: <body> {% csrf_token %} <p> 名称 <input id="sign01" type="text"> <span id="sign03"></span> </p> <p>密码<input id="sign02" type="text"></p> <p><button>注册</button></p> <script src="/static/jquery-3.3.1.js"></script> <script> var $user = $('#sign01'); var $pwd = $('#sign02'); var $csrfmiddlewaretoken = $("[name='csrfmiddlewaretoken']"); var $span = $('#sign03'); $user.on('blur',function () { $.ajax({ usl: '/login01/',data: { name: $user.val(),pwd: $pwd.val(),csrfmiddlewaretoken: $csrfmiddlewaretoken.val(),success: function (data) { if (data === '0') { $span.text("名称已被注册!"); $span.css({'color': 'red'}); } else { $span.text("通过!"); $span.css({'color': 'green'}); } },}); }); </script> </body> 视图文件代码: from django.shortcuts import render,HttpResponse def reg(request): if request.method == 'POST': user = request.POST.get('name') # 名称存在返回0 ret = 0 if models.Userinfo.objects.filter(name=user) else None return HttpResponse(ret) return render(request,'login01.html') 原创: http://106.13.73.98/__/42/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |