一、AJAX预备知识：json进阶
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':"yuan"} 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": "yuan"}'
这里面的json_str就是json字符串；
那么json字符串里都可以放哪些值呢？
JSON字符串内的值：
- 数字 （整数或浮点数）
- 字符串 （在双引号中）
- 逻辑值 （true 或 false）
- 数组 （在方括号中）
- 对象 （在花括号中，引号用双引）
- null
前端接受到json字符串，就可以通过JSON.parse()等方法解析成json对象(即js对象)直接使用了。
之所以称json对象为js的子集，是因为像undefined,NaN,{'name':'yuan'}等都不在json对象的范畴。
2、python与json对象的对应
python --> json
dict object
list,tuple array
str,unicode string
int,long,float number
True true
False false
None null
dumps是将dict转化成str格式，loads是将str转化成dict格式。 dump和load也是类似的功能，只是与文件操作结合起来了。 import json a = {'name': 'wang', 'age': 29} b = json.dumps(a) json.loads(b) a = {'name': 'wang'} fp = file('test.txt', 'w') json.dump(a, fp) json.load(fp) ################## #----------------------------序列化 import json dic={'name':'alvin','age':23,'sex':'male'} print(type(dic))#<class 'dict'> j=json.dumps(dic) print(type(j))#<class 'str'> f=open('序列化对象','w') f.write(j) #-------------------等价于json.dump(dic,f) f.close() #-----------------------------反序列化<br> import json f=open('序列化对象') data=json.loads(f.read())# 等价于data=json.load(f)
让我们看一个带方法的json对象:
var person = {"name":"alex", "sex":"men", "teacher":{ "name":"tiechui", "sex":"half_men", }, "bobby":['basketball','running'], "getName":function() {return 80;} }; alert(person.name); alert(person.getName()); alert(person.teacher.name); alert(person.bobby[0]);
person是一个json对象，因为它满足json规范：在json六大范畴且引号双引！
3、parse()和.stringify()
parse() 用于从一个json字符串中解析出json对象,如 var str = '{"name":"yuan","age":"23"}' 结果：JSON.parse(str) ------> Object {age: "23",name: "yuan"} 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
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']) //这里应该是json字符串啊，应该需要经过JSON.parse（）转换一下吧。？？？？？？？？ </script>
此外，还可以通过下面介绍的ajax技术使js接受django相应的json数据。
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" >
用户名：<input type="text" name="username"/>
<span ></span>
<br/>
密 码：<input type="password" name="password"/>
<span ></span>
<br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>