标签：efault size dcl tips ddc review pad style pen
$.get()方法用于一个HTTP GET请求从服务器加载数据,书写格式如下
当我们点击按钮之后出发一个一次性的Ajax请求,$.get()方法是Ajax请求的快捷方法之一,以下是我们请求的json数据格式,数据中每一段数据存在数组格式中
我们可以看到一共有四段数据在其中,所以我们使用for循环来在外部遍历4次，每一段数据中有三条数据,我们使用$.each()方法来进行每一段数据的遍历,将每一条数据插入到表格中
<!-- HTML代码片段中请勿添加<body>标签 //--> <button>点击获取服务器端数据</button> <table> <thead> <tr> <th>姓名</th> <th>编号</th> <th>年龄</th> </tr> </thead> <tbody> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </tbody> </table> <!-- 推荐开源CDN来选取需引用的外部JS //--> <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
/*CSS源代码*/ button{ display:block; padding:8px 10px; line-height:1.4; text-align:center; cursor:pointer; border-radius:4px; border:1px solid transparent; color:#fff; background:#1aba9c; font-size:15px; } table{ display:none; } .table{ display:inline-block; border-collapse:collapse; margin:10px auto; } td, th{ border:1px solid #356; padding:5px; color:#456; }
/*Javascript代码片段*/ $(function(){ //通过绑定一次点击事件来获得数据 $("button").one("click",function(){ $("table").addClass("table"); $.get("http://cdn.gbtags.com/gblibraryassets/libid102/jsondata.jsp", function(data){ for(var i=0;i<4;i++){ $.each(data[i],function(key,value){ var t=$("<td></td>").text(value); $("tr").eq(i+1).append(t); }); } }, "json"); }); });
标签：efault size dcl tips ddc review pad style pen
原文地址：http://www.cnblogs.com/benpaodegegen/p/7648828.html
