Django Ajax总结

Ajax-Jquery
- ajax 配合 json
使用BookStrap进行前端框架开发
font-awesome 图标插件
Ajax全套
发送请求
- 1.使用JQuery调用Ajax发送GET请求
- 2.使用JS原生发送AjaxGet请求
- 3.使用JQuery发送AjaxPOST请求
- 4.适应JS原生代码发送AjaxPOST请求
- 使用IFrame伪造Ajax请求
- iframe标签
- iframe标签+forn组件可以实现伪造的Ajax请求
Ajax 上传文件
- 1.使用JQuery的Ajax上传文件
- 2.原生JS的Ajax上传文件
Iframe+Form上传文件
- 案例1
- 案例2，添加预览上传的文件的功能
使用Ajax发送跨域请求
- 关于浏览器的同源策略
- 1.JSONP的使用
- 2.案例:Jquery使用JSONP
- 2.利用CORS实现跨区操作，它能突破浏览器同源的限制

Ajax-Jquery

对话框添加，删除，修改：添加：Ajax偷偷向后台发请求：1. 下载引入jQuery2. $.ajax({url: '/add_classes.html',type: 'POST',data: {'username':'root','password': '123'},success:function(arg){// 回调函数，arg是服务端返回的数据}})1. Python序列化字符串 = json.dumps(对象)    对象->字符串对象 = json.loads(字符串)    字符串->对象JavaScript:字符串 = JSON.stringify(对象) 对象->字符串对象 = JSON.parse(字符串)     字符串->对象应用场景：数据传输时，发送：字符串接收：字符串 -> 对象
2. ajax$.ajax({url: 'http//www.baidu.com',type: 'GET',data: {'k1':'v1'},success:function(arg){// arg是字符串类型// var obj = JSON.parse(arg)}})$.ajax({url: 'http//www.baidu.com',type: 'GET',data: {'k1':'v1'},dataType: 'JSON',success:function(arg){// arg是对象}})$.ajax({url: 'http//www.baidu.com',type: 'GET',data: {'k1':[1,2,3,4]},dataType: 'JSON',success:function(arg){// arg是对象}})发送数据时：data中的va. 只是字符串或数字$.ajax({url: 'http//www.baidu.com',type: 'GET',data: {'k1':'v1'},dataType: 'JSON',success:function(arg){// arg是对象}})b. 包含属组$.ajax({url: 'http//www.baidu.com',type: 'GET',data: {'k1':[1,2,3,4]},dataType: 'JSON',traditional: true,success:function(arg){// arg是对象}})# 在服务端只要POST.get("k1")直接取# form表单的serialize只是把它变成字典格式的，不需要使用datatype:json #http://www.cnblogs.com/haiyan123/p/7837439.htmlc. 传字典b. 包含属组$.ajax({url: 'http//www.baidu.com',type: 'GET',data: {'k1': JSON.stringify({}) },dataType: 'JSON',success:function(arg){// arg是对象}})# 此时在服务器端需要使用json.load(k1)3. 事件委托$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})$('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})4. 编辑5. 总结新URL方式：- 独立的页面- 数据量大或条目多对话框方式：- 数据量小或条目少-增加，编辑- Ajax: 考虑，当前页；td中自定义属性- 页面（***）删除：对话框

ajax表单提交data使用values {“k”:values}

dataType:JSON 指定发送的数据格式为JSON字符串

traditional:true 当传递的数据包含数组时，需要设置此项

ajax 配合 json

https://www.cnblogs.com/linkenpark/p/7461709.html

{"k":[1,2,3]}

Ajax内容拾遗

1.内容拾遗- 新URL-提交时，保留之前的内容？？？？- 对话框- var data = $('#fmForm表单的ID').serialize();$.ajax({data: $('#fm').serialize()})

使用BookStrap进行前端框架开发

官网：https://v3.bootcss.com/getting-started/#download

font-awesome 图标插件

http://fontawesome.dashgame.com/

Ajax全套

http://www.cnblogs.com/wupeiqi/articles/5703697.html

发送请求

1.使用JQuery调用Ajax发送GET请求

        function  AjaxSubmit1() {$.ajax({url: '/fs/ajax1.html',type:'GET',data: {'p':123},success:function (arg) {console.log(arg)}})}

2.使用JS原生发送AjaxGet请求

    function AjaxSubmit2() {var xhr = new XMLHttpRequest();<!-- 回调函数一定要在send前执行 -->xhr.onreadystatechange = function () {if(xhr.readyState == 4){// 接收完毕服务器返回的数据console.log(xhr.responseText);}};xhr.open('GET','/fs/ajax1.html?p=123');xhr.send(null);}

3.使用JQuery发送AjaxPOST请求

        function  AjaxSubmit3() {$.ajax({url: '/fs/ajax1.html',type:'POST',data: {'p':123},success:function (arg) {console.log(arg)}})}

4.适应JS原生代码发送AjaxPOST请求

   function AjaxSubmit4() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if(xhr.readyState == 4){// 接收完毕服务器返回的数据console.log(xhr.responseText);}};xhr.open('POST','/fs/ajax1.html');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');xhr.send("p=456");}

使用IFrame伪造Ajax请求

iframe标签

iframe标签可以在指定区域内进行页面跳转和刷新，而不影响整个页面

iframe标签+forn组件可以实现伪造的Ajax请求

    <h3>3.莆田</h3><div><h6>基于Iframe+Form表单</h6><iframe id="iframe" name="ifra"></iframe><form id="fm" action="/fs/ajax1.html" method="POST" target="ifra"><input name="root" value="111111" /><a onclick="AjaxSubmit5()">提交</a></form></div>function AjaxSubmit5() {# 绑定onload事件document.getElementById('iframe').onload = reloadIframe;document.getElementById('fm').submit();
}function reloadIframe() {// this=当前标签//console.log(ths);//console.log(ths.contentWindow);//console.log(ths.contentWindow.document.body.innerHTML);//console.log($(ths).contents().find('body').html());var content = this.contentWindow.document.body.innerHTML;var obj = JSON.parse(content);if(obj.status){alert(obj.message);}}

form提交之后会刷新页面，但由于绑定了Target = ifra 所以只会刷新iframe标签中的内容而不影响全局，相当于是伪造的Ajax请求。

Ajax 上传文件

1.使用JQuery的Ajax上传文件

    function AjaxSubmit6() {//document.getElementById('img')[0]var data = new FormData();data.append('k1','v1');data.append('k2','v2');data.append('k3',document.getElementById('img').files[0]);$.ajax({url: '/fs/ajax1.html',type: 'POST',data:data,success:function (arg) {console.log(arg)},processData: false,  // tell jQuery not to process the datacontentType: false  // tell jQuery not to set contentType})}

2.原生JS的Ajax上传文件

function AjaxSubmit7() {var data = new FormData();data.append('k1','v1');data.append('k2','v2');data.append('k3',document.getElementById('img').files[0]);var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () {if(xhr.readyState == 4){// 接收完毕服务器返回的数据console.log(xhr.responseText);}};xhr.open('POST','/fs/ajax1.html');xhr.send(data);}

Iframe+Form上传文件

案例1

  <iframe style="display: none" id="iframe1" name="ifra1"></iframe><form id="fm1" action="/fs/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1"><input type="text" name="k1" /><input type="text" name="k2" /><input type="file" name="k3" /><a onclick="AjaxSubmit8()">提交</a></form>function AjaxSubmit8() {document.getElementById('iframe1').onload = reloadIframe1;document.getElementById('fm1').submit();}function reloadIframe1() {var content = this.contentWindow.document.body.innerHTML;var obj = JSON.parse(content);console.log(obj);}

案例2，添加预览上传的文件的功能

 <iframe style="display: none" id="iframe1" name="ifra1"></iframe><form id="fm1" action="/fs/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1"><input type="file" name="k3" onchange="uploadFile();" /></form><h3>预览</h3><div id="preview"></div>function uploadFile() {document.getElementById('iframe1').onload = reloadIframe1;document.getElementById('fm1').submit();}function reloadIframe1() {var content = this.contentWindow.document.body.innerHTML;var obj = JSON.parse(content);# 生成上传的文件的预览var tag = document.createElement('img');tag.src = obj.data;$('#preview').empty().append(tag);}

后台

def upload_img(request):import osimport uuid # 保证上传我文件名称不一致nid = str(uuid.uuid4())ret = {'status':True,'data':None,'message':None}obj = request.FILES.get('k3')file_path = os.path.join('static', nid+obj.name)f = open(file_path,'wb')for line in obj.chunks():f.write(line)f.close()ret['data'] = file_pathreturn HttpResponse(json.dumps(ret))

使用Ajax发送跨域请求

关于浏览器的同源策略

浏览器同源策略：XMLHttpRequest，使用request发送数据时，不运行发送给其他服务器，因此只能使用标签(如img script a )中的src这样的方式访问其他服务器，这样的方式称为JSONP

1.JSONP的使用

发送过来数据必须使用一个函数包裹数据,z比如这里是fuck(数据)，然后会执行fuck函数

     function submitJsonp2() {var tag = document.createElement('script');tag.src = 'http://127.0.0.1:9000/xiaokai.html';document.head.appendChild(tag);document.head.removeChild(tag);}function fuck(arg) {$('#content').html(arg);}

2.案例:Jquery使用JSONP

    function submitJsonp4() {$.ajax({url: 'http://127.0.0.1:9000/xiaokai.html',type: 'GET',dataType: 'jsonp',jsonp: 'callback', //前端传过去的callback参数jsonpCallback: 'func'  //相当于callback=func}) //后端拿到了Callback就应该返回func(arg...)}function func(arg) {console.log(arg);}

    JSONP：利用创建script块，在期中执行src属性为：远程url函数(返回值)function 函数(arg){}

注意：JSONP只能发送GET请求，即使在JQuery中写成POST，还是会默认改成GET请求进行发送
http://www.cnblogs.com/wupeiqi/articles/5369773.html

2.利用CORS实现跨区操作，它能突破浏览器同源的限制

http://www.cnblogs.com/wupeiqi/articles/5703697.html

Django Ajax总结相关推荐

ajax防止csrf,django ajax提交避免csrf_toke错误
将以下代码写入到csrf_token_new.js,然后在html页面中加入该js,即可避免出现csrt错误 /*====================django ajax ======*/jQu ...
django ajax请求 csrf验证失败
如何解决django ajax请求 csrf验证失败的问题: 原文链接:http://stackoverflow.com/questions/5100539/django-csrf-check-fai ...
django ajax 更新表格_Django（反向解析，路由分发、名称空间、视图层、虚拟环境、Django版本、json，CBV）...
https://www.zhihu.com/video/1249117508688711680 每日测验 """ 今日考题 1.列举你知道的orm数据的增删改查方法 2. ...
Django - AJAX
一. JSON 什么是json? json指的是JavaScript对象表示法(JavaScript Object Notation) json是轻量级的文本数据交换格式独立于语言, 支持不同的编程 ...
Django Ajax发送请求使用方法
首先需要引入Jquery这个库其次: 需要引入csrf_token 原因是因为django 表单认证需要csrf认证最后,就是正常执行ajax发送请求示例代码如下: <script src ...
django ajax获取数据类型,Django：使用Ajax获取模板中的数据库对象值
您可以使用AJAX回打电话给你的Django代码,并返回你的车的名称: template.html $(document).ready(function() { $(document).on(&quo ...
Django - Ajax - 参数
一.Jquery实现Ajax url type data success error complete statusCode {% load staticfiles %}<! ...
django ajax 查询,Django分页和Ajax查询
在Django中,实现分页以在多个页面上显示查询项目是非常简单的.使用Ajax仅更新实际发生更改的页面位,而不是每次加载整个页面也是非常直接的.但是,当我们将两者结合在一起时,我发现它有点问题.Dja ...
python django ajax 逻辑推理_python django初识ajax
什么是json json是轻量级文本数据交互格式 json独立语言符合的json对象 ["one", "two", "three"] {& ...

Django Ajax总结

Django Ajax总结

Ajax-Jquery

ajax 配合 json

使用BookStrap进行前端框架开发

font-awesome 图标插件

Ajax全套

发送请求

1.使用JQuery调用Ajax发送GET请求

2.使用JS原生发送AjaxGet请求

3.使用JQuery发送AjaxPOST请求

4.适应JS原生代码发送AjaxPOST请求

使用IFrame伪造Ajax请求

iframe标签

iframe标签+forn组件可以实现伪造的Ajax请求

Ajax 上传文件

1.使用JQuery的Ajax上传文件

2.原生JS的Ajax上传文件

Iframe+Form上传文件

案例1

案例2，添加预览上传的文件的功能

使用Ajax发送跨域请求

关于浏览器的同源策略

1.JSONP的使用

2.案例:Jquery使用JSONP

2.利用CORS实现跨区操作，它能突破浏览器同源的限制

Django Ajax总结相关推荐

最新文章

热门文章