ajax和json简单实例html，js

男娘i 2022-03-14 11:46 238阅读 0赞

### ajax和json简单实例 ###

知道小谷的都知道，我是一个不喜欢复习的人，然后上课讲的ajax至今都回避，今天终于还是被迫学习了。  
活不多说，我们直接上代码，希望对和我一样的小菜鸟能有帮助（大佬请护眼！嘿嘿）。  
实例：html，js  
用到两个文件：

![在这里插入图片描述][20190304150241815.png]实现图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]  
**ajax.html**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css"> .container { width: 800px; margin: 0 auto; margin-top: 100px; padding: 30px 0; border: 1px dashed #272627; } .test { width: 100%; padding: 10px 0; margin: 20px 0; color: #4bade8; font-size: 18px; text-align: center; } #jsonTable { width: 500px; margin: 0 auto; } #jsonTable th, td { padding: 6px 0; line-height: 30px; text-align: center; } </style>
    	</head>
     
    	<body>
    		<div class="container">
    			<div class="test">获取模拟json数据</div>
    			<table border="1" cellspacing="0" bordercolor="#4bade8" cellpadding="0" id="jsonTable">
    				<tr>
    					<th>编号</th>
    					<th>姓名</th>
    					<th>年龄</th>
    				</tr>
    			</table>
    			<div id="gym"></div>
    		</div>
     
    		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript"> $(function() { getDate(); function getDate() { var temp = ''; $.ajax({ type: "get",//请求方式 url: "queryList.json",//请求的url dataType: "json",//后台数据返回类 success: function(res) { //响应成功执行的 var list = res.animals alert(res.animals[0].name);//开始的时候我想试试能出来吗？如果出的来，我就试试之前js的一些绑定id修改界面的 var gym=document.getElementById("gym"); gym.innerHTML="<h2>"+res.animals[0].name+"</h2>"; console.log(list) for(var i = 0; i < list.length; i++) { temp += '<tr>' + '<td>' + list[i].id + '</td>' + '<td>' + list[i].name + '</td>' + '<td>' + list[i].age + '</td>' + '</tr>'; } $("#jsonTable tr:not(:first)").html(""); /* 除了第一行tr的内容，其余内容清空，防止获取重复的数据 */ $("#jsonTable").append(temp); } }); } }); </script>
    	</body>
    </html>

**queryList.json**(大家可以先用txt文本写入，然后修改后缀)

{ 
    			"animals":[
    		{ 
    			"id":1,
    			"name":"dog",
    			"age":3
    		},
    		{ 
    			"id":2,
    			"name":"kitty",
    			"age":2
    		},
    		{ 
    			"id":3,
    			"name":"cat",
    			"age":4
    		}
    		]
    }

小谷的尽量减少学习者的负担，直接复制进自己的软软件就能跑出来，ajax.html页面中的js代码学习的同学可以看，也有一点注释。  
如果有帮助，希望大家多给小谷评论，关注。嘿嘿！

[20190304150241815.png]: /images/20220313/f97264fb5eb74a48bb8fee49afe86698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220313/0863aa98db504aed915aa79916b66b1f.png