jQuery中读取json文件示例代码_jquery读取json中的内容,并在页面中的id为mydiv的div中显示学生的姓名和性别为一-优快云博客

本文介绍如何使用jQuery的getJSON方法从JSON格式文件中加载数据并显示在网页上。通过一个具体的例子展示了从userinfo.json文件中读取用户信息并将其呈现在HTML页面中的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。

复制代码代码如下:

$.getJSON(url,[data],[callback])

url：加载的页面地址
data: 可选项，发送到服务器的数据，格式是key/value
callback:可选项，加载成功后执行的回调函数
1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:

复制代码代码如下:

[ 

{ 

"name":"张国立", 

"sex":"男", 

"email":"zhangguoli@123.com" 

}, 

{ 

"name":"张铁林", 

"sex":"男", 

"email":"zhangtieli@123.com" 

}, 

{ 

"name":"邓婕", 

"sex":"女", 

"email":"zhenjie@123.com" 

} 

]

2.其次建一个页面用于获取JSON文件里的用户信息数据，并显示

复制代码代码如下:

<!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>getJSON获取数据-www.jbxue.com</title> 

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 

<style type="text/css"> 

#divframe{ border:1px solid #999; width:500px; margin:0 auto;} 

.loadTitle{ background:#CCC; height:30px;} 

</style> 

<script type="text/javascript"> 

$(function(){ 

$("#btn").click(function(){ 

$.getJSON("js/userinfo.json",function(data){ 

var $jsontip = $("#jsonTip"); 

var strHtml = "123";//存储数据的变量 

$jsontip.empty();//清空内容 

$.each(data,function(infoIndex,info){ 

strHtml += "姓名："+info["name"]+"<br>"; 

strHtml += "性别："+info["sex"]+"<br>"; 

strHtml += "邮箱："+info["email"]+"<br>"; 

strHtml += "<hr>" 

}) 

$jsontip.html(strHtml);//显示处理后的数据 

}) 

}) 

}) 

</script> 

</head> 

<body> 

<div id="divframe"> 

<div class="loadTitle"> 

<input type="button" value="获取数据" id="btn"/> 

</div> 

<div id="jsonTip"> 

</div> 

</div> 

</body> 

</html>