jQuery-第一个简单json传值测试

最新推荐文章于 2024-06-13 17:29:32 发布

Annaluo

最新推荐文章于 2024-06-13 17:29:32 发布

阅读量519

点赞数

分类专栏： jQuery 文章标签： json 测试 ajax html5 xmlhttprequest

本文链接：https://blog.csdn.net/Annaluo/article/details/78774284

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

说明：由于是第一个小例子，所以在命名和规范方面多有缺陷，请谅解。

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>json传值测试</title>

<script src="jquery.js" type="text/javascript"></script>
    <script>
    	$(function(){
			$("#test").click (function(){
				$.getJSON('tablejsontest.json',function(data){
					$('#name').empty();
					var html = '';
					$.each(data,function(nameIndex,name){
						html +='<tr><td>' + name['name'] + '</td><td >' + name['sex'] + '</td><td>' + name['school'] + '</td></tr>';
						})
						$('#name').html(html);
					})
				})
			})
    </script>
</head>

<body>
<table border="1" id="name">
		
	</table>
    <button id="test" value="test" type="button">test</button>
    
   
</body>
</html>

json数据如下：（文件名为：tablejsontest.json）

[
	{
		"name":"anna",
		"sex":"女",
		"school":"第一中学"
		},
	
	{
		"name":"jon",
		"sex":"man",
		"school":"第三中学"
		}
	
	
]

当网页运行完毕后会有一个名为test的按钮，点击即可查看内容

Annaluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-第一个简单json传值测试

说明：由于是第一个小例子，所以在命名和规范方面多有缺陷，请谅解。HTML代码如下：json传值测试 $(function(){ $("#test").click (function(){ $.getJSON('tablejsontest.json',function(data){ $('#name').empty();
复制链接

扫一扫

专栏目录