jQuery之getjson信息展示
2021-05-16 01:28
标签：str body htm table 点击 practice charset 服务器 head json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 创建一个json文件Practice_003.json存放在json文件夹下，确保格式正确。 创建一个HTML页面，加载json信息 点击页面中的按钮即可 jQuery之getjson信息展示 标签：str body htm table 点击 practice charset 服务器 head 原文地址：http://www.cnblogs.com/Shinea_SYR/p/7749509.html$.getJSON(url,[data],[callback])
参数
描述
url
必需。加载的页面地址 。
data
可选项，发送到服务器的数据，格式是key/value
callback
可选项，加载成功后执行的回调函数
1 [
2 {
3 "name":"张三",
4 "sex":"男",
5 "email":"zhangsan@123.com"
6 },
7 {
8 "name":"李四",
9 "sex":"男",
10 "email":"lisi@123.com"
11 },
12 {
13 "name":"王五",
14 "sex":"女",
15 "email":"wangwu@123.com"
16 }
17 ]
1 DOCTYPE html>
2 html lang="en">
3 head>
4 meta charset="UTF-8">
5 title>json Testtitle>
6 script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js">script>
7 script type="text/javascript">
8 $(function (){
9 $("#btn").click(function () {
10 $.getJSON("json/Practice_003.json", function (data){
11 var $jsontip = $("#jsonTip");
12 var strHtml = "123";
13 //存储数据的变量
14 $jsontip.empty();
15 //清空内容
16 $.each(data, function (infoIndex, info){
17 strHtml += "姓名：" + info["name"] + "
";
18 strHtml += "性别：" + info["sex"] + "
";
19 strHtml += "邮箱：" + info["email"] + "
";
20 strHtml += "
"
21 })
22 $jsontip.html(strHtml);
23 //显示处理后的数据
24 })
25 })
26 })
27 script>
28
29 head>
30 body>
31 p>show some json testp>
32 input type="button" value="获取数据" id="btn"/>
33 div id="jsonTip">div>
34 body>
35 html>
文章标题：jQuery之getjson信息展示
文章链接：http://soscw.com/index.php/essay/86038.html