AJAX
一 AJAX预备知识：json进阶
1.1 什么是JSON？
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':"hujq"} 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) #'10' print(json_str2) #'"hello"' print(json_str3) #'[1, 4, 6]' print(json_str4) #'[3, 5, 7]' print(json_str5) #'{"name": "hujq"}'
这里面的json_str就是json字符串；
那么json字符串里都可以放哪些值呢？
JSON字符串内的值：
- 数字 （整数或浮点数）
- 字符串 （在双引号中）
- 逻辑值 （true 或 false）
- 数组 （在方括号中）
- 对象 （在花括号中，引号用双引）
- null
看着是不是有点眼熟啊，对了，这就是咱们js的数据对象；不管是python还是其它语言，它们都有自己的数据类型，但如果要处理成json字符串那么，就要把数据换转成js对应的数据对象（比如python的元组就被处理成了数组，字典就被处理成object），再加上引号就是咱们的json字符串了；
前端接受到json字符串，就可以通过JSON.parse()等方法解析成json对象(即js对象)直接使用了。
之所以称json对象为js的子集，是因为像undefined,NaN,{'name':'hujq'}等都不在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对象:
var person = {"name":"hujq",
"sex":"men",
"teacher":{
"name":"stone",
"sex":"half_men"
},
"bobby":['basketball','running'],
"getName":function() {return 80;}
};
alert(person.name); //hujq
alert(person.getName()); //80
alert(person.teacher.name); //stone
alert(person.bobby[0]); //basketball
person是一个json对象，因为它满足json规范：在json六大范畴且引号双引！
1.3 .parse()和.stringify()
parse() 用于从一个json字符串中解析出json对象,如 var str = '{"name":"tom","age":"23"}' 结果：JSON.parse(str) ------> Object {age: "23",name: "tom"} stringify()用于从一个json对象解析成json字符串，如 var c= {a:1,b:2} 结果： JSON.stringify(c) ------> '{"a":1,"b":2}' 注意1：单引号写在{}外，每个属性名都必须用双引号，否则会抛出异常。 注意2: a={name:"yuan"}; //ok b={'name':'yuan'}; //ok c={"name":"yuan"}; //ok alert(a.name); //ok alert(a[name]); //undefined alert(a['name']) //ok //注：b和c的结果和a相同
1.4 django向js发送数据
#views： def login(request): obj={'name':"tom11"} return render(request,'index.html',{"objs":json.dumps(obj)}) #dict被json成object #---------------------------------- //html： <script> var temp={{ objs|safe }} alert(temp.name); //tom11 alert(temp['name']) //tom11 </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实现的局部刷新