json数据传输格式、data数据（实例讲解）
程序员文章站
2022-04-07 09:49:45
json数据传输格式
本身就是字符串,key-value
value可以是字符串,也可以是列表
jsonObject 以{开头,以}结尾,和字典一样
jsonArray 以...
json数据传输格式
本身就是字符串,key-value
value可以是字符串,也可以是列表
jsonObject 以{开头,以}结尾,和字典一样
jsonArray 以[开头,以]结尾list
json 允许嵌套
http请求
request请求
请求地址
请求参数
请求类型
请求方法
response响应
响应类型
成功
失败
响应内容
状态码
4xxx 请求出了问题,提供参数,路径有问题
5xxx 服务器内部逻辑,需要开发人员自行修复bug
3xxx 请求转发
ajks主要实现发送请求
beforesend 校验数据,添加统一的标识符
error 请求出现了异常
success 请求成功
complete 请求完成,不管结果如何,用来扫尾
datafilter 数据过滤,再请求成功的情况下,
http适用原则
获取使用get
提交操作post
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#get_move').click(function(){
// 发送Ajax请求 data 响应数据
$.getJSON('data/movie_list.json',function(data){
console.log(data);
//获取数据里面的data数据
var json_data = data['data'];
console.log(json_data);
//循环遍历,写出每一条数据的头
for(var i = 0;i<json_data.length;i++){
console.log(json_data[i].title)
// <p class="item">
// <a href="">
// <img src="" />
// <p>人生天地间，忽如远行客</p>
// </a>
// </p>
//渲染到页面中,创建DOM元素
//创建标签,
var $item = $("<p class = 'item'></p>");
var $img = $("<img/>");
var $p = $('<p></p>');
var $a = $("<a></a>")
//给标签里添加值
$img.prop('src',json_data[i].image);
$p.html(json_data[i].title);
$a.prop("href","https://app.vmoiver.com/"+json_data[i].postid+"?qingapp=app_new");
//嵌套标签
$a.append($img).append($p);
$item.append($a)
$('#container').append($item)
}
})
})
})
</script>
<style type="text/css">
img{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
}
p{
height: 200px;
line-height: 200px;
float: left;
/*图片混乱,干掉margin和padding*/
margin: 0px;
padding: 0px;
text-align: center;
}
.item{
border: 1px solid gold;
height: 204px;
padding: 1px;
}
</style>
</head>
<body>
<button id="get_move">获取电影列表</button>
<p id="container">
</p>
</body>
</html>
data数据
上一篇： 巧限网速 让企业网络带宽不被占用
下一篇： 经验分享:关于网站优化细节大揭秘及其建议