好资源导航 » 文章资讯 » jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

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

2023-07-23 20:20:04 80

本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作。分享给大家供大家参考，具体如下：

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页面，获取并展示数据：

方法一：

window.οnlοad=function(){ //js代码请求 } $(function(){ $.ajax({ method:"post", url:"http://localhost:81/getpersons",/*这里要写nginx访问的全路径*/ data:{}, dataType:"json", success:function(data){ varstr="

"+"ID："+items.id+"
"+"姓名："+items.name+"

"; $("div").append(str); } }); })

方法二：

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+")"); varhtmls; for(vari=0;i+"+"name:"+dd[i].name+"+"; $("#a1").append(htmls); } } }); })

更多关于jQuery相关内容可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐