Python自动化开发 - AJAX
一 AJAX预备知识：json进阶
1.1 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON是用字符串来表示Javascript对象
json字符串就是js对象的一种表项形式(字符串的形式)
Python中有json模块，来测试一下json字符串和json对象到底是什么
import json i = 10
s = "hello"
t = (1, 4, 6)
l = [3, 5, 7]
d = {'name': 'Linda'} json_str1 = json.dumps(i)
json_str2 = json.dumps(s)
json_str3 = json.dumps(t)
json_str4 = json.dumps(l)
json_str5 = json.dumps(d) print("json_str1: %s, and type is :%s" % (json_str1, type(json_str1)))
print("json_str2: %s, and type is :%s" % (json_str2, type(json_str2)))
print("json_str3: %s, and type is :%s" % (json_str3, type(json_str3)))
print("json_str4: %s, and type is :%s" % (json_str4, type(json_str4)))
print("json_str5: %s, and type is :%s" % (json_str5, type(json_str5)))
里面的json_str就是json字符串，那么json字符串可以放哪些值呢？
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true或false)
数组(在方括号[xx, xx]中)
对象(在花括号{"xx":xx,引号用双引号})
null
其实就是js的数据对象。不管是Python还是其他语言，都有自己的数据类型，如果要处理成json字符串，
就要把数据转换成js对应的数据对象(比如Python的元组就处理成数组，字典就被处理成object)，再加上引号就是json字符串
前端接收到json字符串，就可以通过JSON.parse()等方法解析成json对象(即js对象)，直接使用就行
之所以称json对象为js的子集，是因为像undefined,NaN,{'name':'yuan'}等都不在json对象的范畴。
1.2 Python与JSON对象的对应
python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
一个带方法的json对象，person就是一个json对象，满足json规范
<script>
var person = {
"name": "alex",
"sex": true,
"teacher":{
"name":"egon",
"sex": false
},
"hobby":['running','basketball'],
"getAge":function () {
return 80;
}
}; alert(person.name);
alert(person.getAge());
alert(person.teacher.name);
alert(person.hobby[0]);
</script>
1.3 JSON.parse()和JSON.stringify()
parse() 用于从一个json字符串中解析出json对象,如
var str = '{"name":"linda","age":"23"}'
结果：JSON.parse(str) ------> Object {age: "23",name: "linda"}
stringify()用于从一个json对象解析成json字符串，如
var c= {a:1,b:2}
结果： JSON.stringify(c) ------> '{"a":1,"b":2}'
注意1：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。
注意2:
a={name:"linda"}; //ok
b={'name':'linda'}; //ok
c={"name":"linda"}; //ok
alert(a.name); //ok
alert(a[name]); //undefined
alert(a['name']) //ok
1.4 Django向JS发送数据
def login(request):
obj={'name':"alex111"}
return render(request,'index.html',{"objs":json.dumps(obj)})
#----------------------------------
<script>
var temp={{ objs|safe }}
alert(temp.name);
alert(temp['name'])
</script>
此外，还可以通过下面介绍的ajax技术使js接受django相应的json数据。
1.5 JSON与XML比较
可读性： XML胜出；
解码难度：JSON本身就是JS对象（主场作战），所以简单很多；
流行度： XML已经流行好多年，但在AJAX领域，JSON更受欢迎。
注解：其实本没什么json对象，只是我们自己这么称呼罢了，所谓的json数据就是指json字符串，在前端解析出来的对象就是js对象的一部分！
二 什么是AJAX
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script type="text/javascript">
window.onload = function() {//当文档加载完毕时执行本函数
var form = document.getElementById("form1");//获取表单元素对象
form.onsubmit = function() {//给表单元素添加一个监听，监听表单被提交事件
var usernameValue = form.username.value;//获取表单中名为username的表单元素值
if(!usernameValue) {//判断该值是否为空
var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素后的<span>元素
usernameSpan.innerText = "用户名不能为空！";//设置span元素内容！
return false;//返回false，表示拦截了表单提交动作
}
return true;//不拦截表单提交动作
};
};
</script>
</head>
<body>
<h1>注册页面</h1>
<form action="" method="post" id="form1">
用户名：<input type="text" name="username"/>
<span id="usernameSpan"></span>
<br/>
密 码：<input type="password" name="password"/>
<span id="passwordSpan"></span>
<br/>
<input type="submit" value="注册"/> </form>
</body>
</html> js实现的局部刷新
jS实现局部刷新
三 AJAX常见应用场景
四 AJAX的优缺点
优点：
AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
五 AJAX技术
四步操作：
创建核心对象；
使用核心对象打开与服务器的连接；
发送请求
注册监听，监听服务器响应。
XMLHTTPRequest
open(请求方式, URL, 是否异步)
send(请求体)
onreadystatechange，指定监听函数，它会在xmlHttp对象的状态发生变化时被调用
readyState，当前xmlHttp对象的状态，其中4状态表示服务器响应结束
status：服务器响应的状态码，只有服务器响应结束时才有这个东东，200表示响应成功；
responseText：获取服务器的响应体
六 AJAX实现
七 AJAX实例
八 jQuery实现AJAX
$.ajax()是jQuery对AJAX的封装实现
$(function () {
$("#login-button").click(function () {
var username = $("#login-form #id_username").val();
var password = $("#login-form #id_password").val();
console.log(username);
console.log(password);
$.ajax({
url:'/host/login/', // 发送数据目标url
type:"POST", // 发送数据方式
data:{username:username,password:password}, // 发送数据
success:function (data) { // 成功响应的回调处理函数
var data_dict = JSON.parse(data); //输入参数 data为JSON字符串
if(data_dict.status){
location.href = "/host/hosts/"
}else {
$("#login_msg").text(data_dict.error);
}
}
})
})
});
Python自动化开发 - AJAX的更多相关文章
- python自动化开发学习 进程, 线程, 协程
python自动化开发学习 进程, 线程, 协程 前言 在过去单核CPU也可以执行多任务,操作系统轮流让各个任务交替执行,任务1执行0.01秒,切换任务2,任务2执行0.01秒,在切换到任务3,这 ...
- python自动化开发学习 I/O多路复用
python自动化开发学习 I/O多路复用 一. 简介 socketserver在内部是由I/O多路复用,多线程和多进程,实现了并发通信.IO多路复用的系统消耗很小. IO多路复用底层就是监听so ...
- python自动化开发-[第十八天]-django的ORM补充与ajax,分页器
今日概要: 1.ORM一对多,多对多 2.正向查询,反向查询 3.聚合查询与分组查询 4.F查询和Q查询 5.ajax 6.分页器 一.ORM补充: django在终端打印sql语句设置: LOGGI ...
- Python自动化开发-简介
1.Python简介 Python创始人 Guido Van Rossum,人称"龟叔",1989年圣诞节期间,为了在阿姆斯特丹打发时间,开发的一个新的脚本解释程序 作为ABC语 ...
- python自动化开发-1
1.python简介 python是一门简明并且强大的面向对象的开发语言,已经在WEB开发,软件开发,科学计算,大数据分析,自动化运维等领域得到了广泛的应用. 注意:所有测试均已python3为主,与 ...
- 写给深圳首期Python自动化开发周未班的信
你是否做了正确的决定? 深圳首期周未班的同学们大家好,我是Alex, 老男孩教育的联合创始人,Python项目的发起人,51CTO学院连续2届最受学员喜爱的讲师,中国最早一批使用Python的程序员, ...
- Python自动化开发 - Django【进阶篇】
Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行 ...
- python自动化开发-2
1.python的数据类型之列表 列表是Python开发语言中最常见的数据类型之一,通过列表可以实现对数据的增删改等常用操作. 列表的定义:例子 names = ["Lucy",& ...
- python自动化开发-[第二十三天]-初识爬虫
今日概要: 1.爬汽车之家的新闻资讯 2.爬github和chouti 3.requests和beautifulsoup 4.轮询和长轮询 5.django request.POST和request. ...
随机推荐
- iOS.C
iOS开发中C语言的应用: 1. NS_ENUM & NS_OPTIONS http://nshipster.com/ns_enum-ns_options/
- BZOJ4033或洛谷3177 [HAOI2015]树上染色
BZOJ原题链接 洛谷原题链接 很明显的树形\(DP\). 因为记录每个点的贡献很难,所以我们可以统计每条边的贡献. 对于每一条边,设边一侧的黑点有\(B_x\)个,白点有\(W_x\),另一侧黑点有 ...
- Lazarus IOCP 移植
delphi下面有一个高性能IOCP库,是俄国人写的,在下将其移植到了lazarus下面, lazarus 版本 1.0.12 ,需要的下载 和indy相比较,indy开发的一个web服务器,cpu占 ...
- vim删除单词
参考资料: https://blog.csdn.net/grey_csdn/article/details/72355735 混迹于Windows.Linux以及Mac,选择加强自己的VIM水平应该不 ...
- 拍照一分钟，修图两小时，PS大神是这样修片的！
乌克兰有一个叫Viktoria Solidarnyh的美图艺术家,这个艺术家有一个特别的技能——P图,她P的图,水平真的非常赞...来感受一下.... 瞬间变成魔幻田园风... 编辑:千锋UI设计 ...
- 论坛：获取当前原始请求中的远程IP地址
topic.setIpAddr(ServletActionContext.getRequest().getRemoteAddr());//当前原始请求中的远程IP地址
- 工具类Utils的单元测试方式
数据质量功能已经开发完毕,但是要实现单元测试覆盖率80%以上,其他的还好,只是这个工具类实在让我摸不着头脑,其实工具类的单元测试是最简单的,只是自己想复杂了而已: 无返回值模拟: 有返回值模拟: 异常 ...
- flask学习视频
https://study.163.com/course/courseMain.htm?courseId=1004091002 主要 https://www.cnblogs.com/senlinyan ...
- 关于传统项目打成war包的的分析
技术在不断的革新,以前的项目没有jar管理工具时,都是手动将依赖的jar拷贝到项目之下,然后Build Path,之后Maven出现了,出现了jar包中央仓库,所有的jar包资源集中在这里,免去频繁去 ...
- 【Redis】Redis cluster集群搭建
Redis集群基本介绍 Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施installation. Redis 集群不支持那些需要同时处理多个键的 Redis 命令, 因为执行 ...