JSON文件

创建json文件

创建data目录，在data目录下，创建list.json文件，在其文件中，编写代码如下：

{
	"name":"老李", 
	    "age":20, 
	    "hobby":["登山","旅游","看书","打球"], 
	    "sex": "男",
	    "info":"大狗熊一个"
}

注意：JSON 文件 中的 字符串 我们只能用 双引号。不能使用 单引号。

访问json文件中的数据

创建html文件，引入json文件，并访问list.json文件，让json格式的数据，出现在在网页上：

<h1>使用jquery--访问json文件中的数据</h1>
		<button id="btn">访问json文件中的数据</button>
		
		<div id="name"></div>
		<div id="info"></div>
		<div id="hobby"><ul></ul></div>
		
		<script src="./data/jquery-3.5.1/jquery-3.5.1.min.js"></script>
		
		<script>
			$(function(){
				// 1.接口---访问json文件(请求地址)
				var apiUrl = './data/list.json';
				
				$('#btn').click(function(){
					// console.log('你干嘛？');
					
					// 通过ajax异步获取数据
					$.ajax({
						// 请求地址
						url:apiUrl,
						// 请求方式
						type:'get',
						// 请求的数据格式
						dataType:'json',
						success:function(result){
							console.log(result);
							
							$('#name').html(result.uname);
							$('#info').html(result.info);
							
							// 遍历
							var strHtml = ' ';
							$.each(result.hobby,function(index,item){
								console.log(index,item);
								
								
								strHtml += `<li>${item}</li>`;
							})
							console.log(strHtml);
							$('#hobby ul').html(strHtml);
						}
					})
					
				})
				
				
				
				
				
				
				
			})
		</script>

预览效果

 注意：点击访问json文件中的数据按钮，才能看到控制台的输出

通过jquery网址：jQuery插件库-收集最全最新最好的jQuery

进入此网址，找到jQuery下载，然后下载3.5.1到data文件并只保留jquery-3.5.1.js文件和jquery-3.5.1.min.js文件