jQuery+Ajax+js实现请求实现请求json格式数据并渲染到格式数据并渲染到html页面操作页面操作
示例示例
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求
json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
本文实例讲述了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页面，获取并展示数据：
方法一：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<div id="test">
</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="https://code.jquery.com/jquery-1.12.4.js"></script>
<body>
<div id="test">
<table border="1" cellspacing="1" cellpadding="1" id="a1">
weixin_38734008
- 粉丝: 12
- 资源: 916
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
- MW全能培训汽轮机调节保安系统PPT教学课件.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论5