【Day41】Python之路——AJAX

什么是AJAX

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

优点:

  不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容

  不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行

同源策略与jsonp

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

jsonp(jsonpadding)

之前发ajax的时候都是在自己给自己的当前的项目下发

现在我们来实现跨域发。

ajax请求的本质:生成xmlHttpRequest对象
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>index</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form  action="" method="" ><input type="text" name="k1" value="v1"><input type="text" name="k2" value="v2"><input id="forms_btn" type="button" value="提交">{% csrf_token %}</form>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script></body>
</html>
前端

下面是,前端以json格式 发往后端的JavaScript代码

<script>$("#forms_btn").click(function () {$.ajax({url:"/fromData/",type:"post",dataType:"json",        // 注意 :是预期服务器返回的数据类型headers:{"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},contentType:"application/json",data:{"name":$("[name='k1']").val(),"name":$("[name='k2']").val(),},})})
</script>

注意: 

  1、设置contentType:默认编码格式 “url_encoding” ?a=1&b=2

  2、设置headers

  3、data, 在后端接受到是以二进制形式(b'password=v1&name=v2'),需要反序列化

    前端的JavaScript data{“a”:1,“b”:2}, 其中a,b 可以不用提前定义,就使用,所以可以这样使用:data{a:1,b:2}和Python不同

  4、后台取数据不能在POST中取,需要在body中取

dataType

前端设置dataType ,后端如果返回的非json数据,后端不能识别,但是不报错,

使用Ajax跨域

view层

def ajax_send(request):func=request.GET.get("callback")print("func",func)res={"name":"alex"}import jsonreturn HttpResponse("%s('%s')"%(func,json.dumps(res)))

ajax 无法跨域访问其他网站,

<script>$(".b1").click(function () {$.ajax({url:"http://127.0.0.1:8002/ajax_send/",    // 浏览器的同源策略的原因,AJax无法发送跨域请求
             success:function (data) {alert(data)}})});
</script>

下面看如何解决跨域访问

跨域访问初级版

<script>function foo(s) {console.log(s);JSON.parse(s)}function kua_yu(url) {// 生成   script标签var $ele_script=$("<script>");  注意:使用了 $ele_script创建标签$ele_script.attr("src",url);$ele_script.attr("class","kuayu");// 添加到body中
            $("body").append($ele_script);   // 发送请求
            $(".kuayu").remove()             // 生成之后即删除,不会产生多余的标签}$(".b2").click(function () {kua_yu( "http://127.0.0.1:8002/ajax_send/?callback=foo")});
</script>

跨域访问进阶版

$(".b1").click(function () {$.getJSON("http://127.0.0.1:8002/ajax_send/?callback=?",function (data) {   // function 使用了回调函数,console.log(data);})
});

要注意的是在url的后面必须添加一个callback参数,这样getJSON方法才会知道是用JSONP方式去访问服务,callback后面的那个?是内部自动生成的一个回调函数名

跨域访问高级版

<script>
$(".b1").click(function () {$.ajax({url:'http://127.0.0.1:8002/ajax_send/',dataType:"jsonp",jsonp: 'callback',jsonpCallback:"SayHi"});
});$(".b2").click(function () {$.ajax({url:'http://www.jxntv.cn/data/jmd-jxtv2.html?',dataType:"jsonp",jsonp: 'callback',jsonCallback:"list"                            // 访问的函数名,可定制});});function list(data) {console.log(data.data);$.each(data.data,function (i,weekday) {//console.log(j);  // {week: "周日", list: Array(19)}
            $("body").append("<p>"+weekday.week+"</p>");console.log(weekday.list);$.each(weekday.list,function (j,show) {s="<p><a href='"+show.link+"'>"+show.name+"</a></p>"$("body").append(s);})})}</script>

注意:jsonp 一定是GET请求

csrf跨站请求伪造

如果把type:"GET"  改为type:"POST" 会报一个Forbidden的错

解决办法有三种:

方式一:

     $.ajaxSetup({data:{csrfmiddlewaretoken:'{{ csrf_token }}'}});注意:要放在ajax请求的前面,在发送之前组装一组字符串,在第一步render的时候就发了所以有局限性:如果把JS代码放到静态文件中,不会渲染,不会执行{{csrf_token}},只能在HTML页面中使用

方式二:自己组装一组键值对  ( 推荐)

复制代码
<form>
{% csrf_token %}
</form>data:{csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),name:$(":text").val(),pwd:$(":password").val()},
复制代码

方式三:自己设置头信息

复制代码
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
$.ajax({url:"/serialize/",type:"POST",headers:{"X-CSRFToken":$.cookie('csrftoken')},})
复制代码

jQuery.serialize() 

serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串

serialize()函数常用于将表单内容序列化,以便用于AJAX提交。

该函数主要根据用于提交有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。更多详情请点击这里。

语法:

jQueryObject.serialize( )

serialize()函数的返回值为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。

请参考下面这段初始HTML代码:

复制代码
<form name="myForm" action="http://www.365mini.com" method="post"><input name="uid" type="hidden" value="1" /><input name="username" type="text" value="张三" /><input name="password" type="text" value="123456" /><select name="grade" id="grade"><option value="1">一年级</option><option value="2">二年级</option><option value="3" selected="selected">三年级</option><option value="4">四年级</option><option value="5">五年级</option><option value="6">六年级</option></select><input name="sex" type="radio" checked="checked" value="1" />男<input name="sex" type="radio" value="0" />女<input name="hobby" type="checkbox" checked="checked" value="1" />游泳<input name="hobby" type="checkbox" checked="checked" value="2" />跑步<input name="hobby" type="checkbox" value="3" />羽毛球<input name="btn" id="btn" type="button" value="点击" />
</form>
复制代码

 对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

我们也可以直接对部分表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width"><title>Title</title>
</head>
<body>
<form name="myForm" action="http://www.365mini.com" method="post"><input name="uid" type="hidden" value="1" /><input name="username" type="text" value="张三" /><input name="password" type="text" value="123456" /><select name="grade" id="grade"><option value="1">一年级</option><option value="2">二年级</option><option value="3" selected="selected">三年级</option><option value="4">四年级</option><option value="5">五年级</option><option value="6">六年级</option></select><input name="sex" type="radio" checked="checked" value="1" /><input name="sex" type="radio" value="0" /><input name="hobby" type="checkbox" checked="checked" value="1" />游泳<input name="hobby" type="checkbox" checked="checked" value="2" />跑步<input name="hobby" type="checkbox" value="3" />羽毛球<input name="btn" id="btn" type="button" value="点击" />
</form>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>$("#btn").click(function () {
{#        方式一#}//$.ajaxSetup({// data:{csrfmiddlewaretoken:'{{ csrf_token }}'}//});
        $.ajax({url:"/serialize/",type:"POST",
{#            方式三#}headers:{"X-CSRFToken":$.cookie('csrftoken')},//data:$("form").serialize(),   //序列form表单所有的
            data:$(":text,:password,:checkbox").serialize(),  //序列自己选择的
            success:function (data) {var data=JSON.parse(data);  //js中的反序列化
                console.log(data);console.log(typeof data);$(".error").html(data);}})})
</script>
</body>
</html>serialize.html
serialize.html
1 def serialize(request):
2     # form = request.POST
3     # print(form)
4     name = request.POST.get("username")
5     password = request.POST.get("password")
6     checked = request.POST.getlist("hobby")
7     print(name,password,checked)
8     return HttpResponse(json.dumps(name))
View Code
当有好多input的时候,就得一一对应的吧所有的数据发过去的,这样显得麻烦,我们用序列化
jQuery.serialize()data:$("form").serialize(),   //序列form表单所有的
data:$(":text,:password,:checkbox").serialize(),  //序列自己选择的在服务端获取数据
form = request.POST   
print(form)   #获取所有
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)#获取单个

 Ajax上传文件(利用FormData)

既可以处理二进制,又可以处理字典,列表啊等

FormData是什么呢?

XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
注意:下文中的几个需要解释的
$("#upload") 拿到的是一个集合
$("#upload")[0]  就是一个dom对象
$("#upload")[0].files   拿到的是一个filelist
$("#upload")[0].files[0]  拿到的是当前最近的文件对象 

要是使用FormData一定要加上:

一定要加上:

  contentType:false 
  processDate:false #不做预处理

ajaxupload.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width"><title>Title</title>
</head>
<body>
<p>姓名<input type="text" name="username"></p>
<p>头像<input type="file" id="upload"></p>
<p><button class="btnnn">提交</button><span class="tishi"></span></p>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>$(".btnnn").click(function () {var formData=new FormData();formData.append("username",$(":text").val());formData.append("file",$("#upload")[0].files[0]);$.ajax({url:"/get_upload/",type:"POST",headers:{"X-CSRFToken":$.cookie('csrftoken')},data:formData,contentType:false,processData:false,success:function (data) {$(".tishi").html("上传成功")}})})
</script>
</body>
</html>
复制代码

 view.py

复制代码
def ajaxupload(request):return render(request,"ajaxupload.html")def get_upload(request):if request.method == "POST":print("FIFLE", request.FILES)file_obj = request.FILES.get("file")print(file_obj.name, "-----")file_obj = request.FILES.get("file")with open(file_obj.name, "wb") as f:for i in file_obj:f.write(i)return HttpResponse("上传成功")

 

转载于:https://www.cnblogs.com/huyangblog/p/8280330.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/539284.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LINUX重启MYSQL的命令

原文&#xff1a;http://blog.csdn.net/liuyong0818/article/details/5693336 ------------------------原文有错误&#xff0c;本文转载时已修改--------- 如何启动/停止/重启MySQL 一、启动方式 1、使用 service 启动&#xff1a;service mysql start 2、使用 mysql 脚…

html css子标签,HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类)...

一.标签选择器Documenth1 {color: red;}h2{color: green;}Hello World!Hello World!Hello !Hello !二.类选择器Document.box {color: green;}.box1 {font-size: 26px;}Hello World!Hello World!三.ID选择器Document#box{color: green;}Hello World!四.通配符选择器Document*{ma…

aes离线解密工具_如何在Python中解密OpenSSL AES加密文件?

OpenSSL为AES加密提供了一种流行的(但不安全 - 见下文&#xff01;)命令行界面&#xff1a;openssl aes-256-cbc -salt -in filename -out filename.encPython以PyCrypto包的形式支持AES&#xff0c;但它只提供工具。如何使用Python / PyCrypto解密使用OpenSSL加密的文件&#…

什么是Hive

Hive 是建立在 Hadoop 上的数据仓库基础构架。 它提供了一系列的工具&#xff0c;可以用来进行数据提取转化加载&#xff08;ETL &#xff09;&#xff0c;这是一种可以存储、查询和分析存储在 Hadoop 中的大规模数据的机制。 Hive 定义了简单的类 SQL 查询语言&#xff0c…

VUE-搜索过滤器

VUE非常实用的搜索过滤&#xff0c;喜欢点个赞哦 废话不多说&#xff0c;先来看看效果 1 引入vue <script src"https://cdn.jsdelivr.net/npm/vue"></script>2 HTML <div id"app"><input v-modelsearch /><ul v-if"search…

单选按钮必填会有红色选中提示吗_为什么单选按钮和复选框不能共存?

以下内容由摹客团队翻译整理&#xff0c;仅供学习交流&#xff0c;摹客设计协作一站式云平台&#xff0c;从产品、设计到开发&#xff0c;摹客来解决。单选按钮和复选框长期以来一直都是容易导致用户困惑的组件。这两个组件通常用于相同的情景下&#xff0c;但看起来又完全不同…

用计算机进行服装设计,电脑服装设计(10制版1班)

《电脑服装设计》课程教学大纲课程名称:电脑服装设计(Corldraw和Photoshop)课程代码:10617313总学时&#xff1a;68课时适用专业&#xff1a;10制版方向学生开课单位&#xff1a;时装设计学院一、讲课内容第一章 CORELDROW软件整体的介绍第一节绪论, 与其他图形绘制软件的区别及…

程序包org.junit.jupiter.api不存在

在跑项目的时候遇到这个问题&#xff0c;去看pom文件一切正常&#xff0c;也引入了这个依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.13.2</version> <scope>test</scope&…

thrift介绍及应用(一)—介绍

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12157151 ------------------------------------------------------------------------------------ 一、概述 Thrift是Apache下的一个子项目&#xff0c;最早是Facebook的项目&#xff0c;后来Facebook提供给Apa…

matlab双目相机标定校正_基于双目视觉的无人机避障算法(一)

讲述在10月到12月所做的所有工作对于一个无人机自主避障来说&#xff0c;存在着以下流程&#xff1a;感知&#xff1a;障碍物检测、行人检测、目标检测SLAM&#xff1a;为无人机提供位置估计&#xff0c;构建稀疏环境地图路径规划&#xff1a;规划一条从当前位置到目标位置的移…

计算机无法播放,如果无法播放计算机mp4文件怎么办?

FireStar365接受1. 下载并安装最新版本的视频播放器(例如: Storm Video).2. 在硬盘中找到MP4视频文件.3. 右键单击该文件&#xff0c;然后选择打开方法“ Storm Video”.4. 可以双击打开页面.zxc942128835将mp4链接到计算机&#xff0c;打开磁盘&#xff0c;单击菜单栏上的工具…

thrift介绍及应用(二)—简单应用

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12162131 ----------------------------------------------------------------------------------- 【接上文“thrift介绍及应用&#xff08;一&#xff09;—介绍”】 六、一个最简单的实例 Thrift文件&#xf…

打游戏的教育意义

夜色已深&#xff0c;一个男孩子还在打游戏。门忽然开了&#xff0c;妈妈走了进来&#xff0c;她把一碗阳春面摆在桌子上。说&#xff1a;"歇息一会儿&#xff0c;趁热把这碗面吃了吧。"孩子嗯了一声&#xff0c;眼睛没有离开屏幕。妈妈生怕打搅孩子&#xff0c;悄悄…

python快速编程入门课本第六章_python编程快速上手第六章实践项目参考code

代码如下&#xff1a; 题目的意思是通过一个函数将列表的列表显示在组织良好的表格中&#xff0c;每列右对齐 tableData [[apples, oranges, cherries, banana], [Alice, Bob, Carol, David], [dogs, cats, moose, goose]]apples Alice dogs oranges Bob cats cherries Carol …

计算机硬件配置组件,配置vcenter server的硬件(默认指windows版本的)

一般来说vcenter的硬件需求与它管理的主机和VM有直接关系1. vcenter server的最低硬件配置Two 64-bit CPUs or a single dual-core 64-bit CPU.2 GHz processor or faster.4 GB of RAM or more.4 GB of free disk space.A network adapter (Gigabit Ethernet strongly recommen…

标准评分卡分数计算原理_评分卡的形式、刻度及应用场景

&#xfeff; 看到有伙伴提问&#xff1a;①我们的评分卡做好后&#xff0c;后续的使用策略是什么呀&#xff0c;都有哪些方向&#xff1f; ②评分卡分数切割点如何定&#xff0c;制定的业务逻辑是什么&#xff1f;其实&#xff0c;这个问题不好回答&#xff0c;也好回答。一方…

hexeditor 复制二进制值_MySQL复制全解析 Part 6 MySQL GTID 生命周期

实验环境此次实验的环境如下MySQL 5.7.25Redhat 6.10操作系统账号:mysql数据库复制账号:repl复制格式:基于行的复制通过前面的介绍我们知道MySQL的复制有两种方法基于二进制日志文件位置基于GTID上一节的内容为GTID的格式和存储&#xff0c;这节根据官方文档我们说GTID的生命周…

Thrift介绍与应用(三)—hbase的thrift接口

原文&#xff1a;http://blog.csdn.net/guxch/article/details/12163047 ----------------------------------------------------------------------------------- 一、概述 Hbase是目前比较火的列存储数据库&#xff0c;由于Hbase是用Java写的&#xff0c;因此它原生地提供了…

Linux/Unix 新手和专家教程

你正在找一些高质量的Linux 和 UNIX 的教程吗&#xff1f;如果是&#xff0c;这篇文章会告诉你到哪去找到这些教程。这里我们将给出超过30个相当的不错的 Linux 和 UNIX 在线的教程。 需要大家注意的是&#xff0c;他们都是英文的&#xff0c;也许有一些也经被翻译到了中文社区…

自动ip的计算机共享打印,局域网内自动获取ip地址怎么设置打印机共享文件夹...

在局域网环境中,为了尽可能地节省办公成本,很多用户都会选择在局域网中架设、部署共享打印机,以便在单位的任何角落处都能方便、自如地进行打印操作。下面是学习啦小编为大家整理的关于局域网内自动获取ip地址怎么设置打印机共享文件夹&#xff0c;一起来看看吧!局域网内自动获…