没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
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">
资源评论
- 无能为力就要努力2023-07-26这个文件的示例非常清晰,让人很容易理解如何操作和实现请求JSON数据到HTML页面的功能。
- 经年哲思2023-07-26我通过这个文件学到了很多关于使用jQuery Ajax获取JSON数据并展示的技巧,非常值得一读。
- 朱王勇2023-07-26这个文件的示例代码简明扼要,不仅介绍了如何请求JSON数据,还展示了如何将数据渲染到HTML页面,非常实用。
- 阿汝娜老师2023-07-26对于刚开始学习jQuery Ajax的人来说,这个文件提供了一个很好的参考和指导,非常适合初学者。
- 普通网友2023-07-26这个文件详细介绍了如何使用jQuery Ajax来获取并渲染JSON格式的数据,非常实用。
weixin_38734008
- 粉丝: 12
- 资源: 916
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功