欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

jQuery+Ajax+js实现请求json格式数据并渲染到html页面

时间:2020-06-03|栏目:JavaScript|点击:

1、先给json格式的数据:

[ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id":4,"name":"mary"}, {"id":5,"name":"jerry"}, {"id":6,"name":"tom"} ]

2、通过访问html页面,获取并展示数据:

方法一:

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="http://www.zhano.cn/uploads/allimg/200602/145U4J40-0.jpg"></script> <body> <div> </div> <script type="text/javascript"> window.οnlοad=function(){ //js代码请求 } $(function(){ $.ajax({ method:"post", url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/ data:{}, dataType: "json", success: function(data){ var str="<ul>"; $.each(data,function(i,items){ str+="<li>"+"ID:"+items.id+"</li>"; str+="<li>"+"姓名:"+items.name+"</li>"; }); str+="</ul>"; $("div").append(str); } }); }) </script> </body> </html>

方法二:

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="http://www.zhano.cn/uploads/allimg/200602/145U4J40-0.jpg"></script> <body> <div> <table cellspacing="1" cellpadding="1"> </table> </div> <script type="text/javascript"> window.οnlοad=function(){ //js代码请求 } $(function(){ $.ajax({ method:"post", url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/ data:{}, success: function(data){ alert(data); //将json数据转换 dd=eval("("+data+")"); var htmls; for(var i=0;i<dd.length;i++){ htmls="<tr>+<td>"+"id: "+dd[i].id+"</td>+<td>"+"name :"+dd[i].name+"</td>+</tr>"; $("#a1").append(htmls); } } }); }) </script> </body> </html>

上一篇:JavaScript实现手机号码 3-4-4格式并控制新增和删除

栏    目:JavaScript

下一篇:JS实现前端动态分页码代码实例

本文标题:jQuery+Ajax+js实现请求json格式数据并渲染到html页面

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1522.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7