ajks_01
来源：互联网 发布：火星哥 知乎 编辑：程序博客网 时间：2024/06/07 04:04
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)// <div class="item">// <a href="">// <img src="" />// <p>人生天地间，忽如远行客</p>// </a>// </div> //渲染到页面中,创建DOM元素 //创建标签, var $item = $("<div class = 'item'></div>"); 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","http://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> <div id="container"> </div> </body></html>data数据
