JSON
定义:
JSON(Javascript object notation, JS 对象标记)是一种轻量级的数据交换格式;是基于ECMASCript(w3c js规范)的一个子集.
JS-JSON-Python.png
JSON对象定义需要注意的点
- 属性名必须用"(双引号)
- 不能使用十六进制值
- 不能使用undefined
- 不能使用函数名和日期函数
stringify与parse方法
JSON.parse()将一个JSON字符串转化为JavaScript对象;
JSON.stringify()用于将JavaScript值转化为JSON字符串;
JSON表示示例
{
"name": "中国",
"province": [{
"name", "黑龙江",
"cities", {
"city": ["哈尔滨", "大庆"]
}
},{
"name": "广州",
"cities": {
"city": ["广州", "深圳", "珠海"]
}
},{
"name": "台湾",
"cities":{
"city": ["台北", "高雄"]
}
},{
"name": "新疆",
"cities":{
"city": ["乌鲁木齐"]
}
}]
}
JSON和Django交互
def login(request):
obj = {'name': 'fbo1986'}
return render(request, 'index.html', {"objs",json.dumps(obj)})
----html---
<script>
var temp={{ objs|safe }}
alert(temp.name)
alert(temp['name'])
</script>
Ajax
AJAX(Asynchronous JavaScript And XML) --> 异步JavaScirpt和XML;
使用JavaScript语言与服务器交互,传输的数据xml(传输的数据不只是xml)
同步交互: client端发送一个请求,需要等待server端响应
异步交互: client端发送一个请求后,无需等server端响应,可以直接发送下一个请求
局部刷新
Ajax除了异步特性,还有可以实现浏览器页面局部刷新
JS实现局部刷新示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red
}
</style>
</head>
<body>
<form class="Form">
<p>姓名 <input class="v1" type="text" name="username" mark="用户名"/></p>
<p>邮件 <input class="v1" type="text" name="email" mark="邮件"/></p>
<p><input type="submit" value="submit"/></p>
</from>
<script src="jquery-3.1.1.js"></script>
<script>
$(".From:submit").click(function(){
flag=true;
$("From.v1").each(function(){
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var $span=$("<span>");
$span.html(mark+"不能为空!")
$span.prop("class", "error")
$(this).after($span);
setTimeout(funtion(){
$span.remove();
}, 800);
flag=false;
return flag;
};
});
});
</script>
</body>
</html>
