<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getJSON函数获取数据title> <script type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> script> <script type="text/javascript" src="Jscript/jquery-1.4.2.js"> script> <style type="text/css"> body{font-size:13px} .divFrame{width:260px;border:solid 1px #666} .divFrame .divTitle{padding:5px;background-color:#eee} .divFrame .divContent{padding:8px} .divFrame .divContent .clsShow{font-size:14px} .btn {border:#666 1px solid;padding:2px;width:80px; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} style> <script type="text/javascript"> $(function() { $("#Button1").click(function() { //按钮单击事件 //打开文件，并通过回调函数处理获取的数据 $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名：" + Info["name"] + "
";
strHTML += "性别：" + Info["sex"] + "
";
strHTML += "邮箱：" + Info["email"] + "
";
})
$("#divTip").html(strHTML); //显示处理后的数据 })
})
}) script> head> <body> <div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" class="btn" value="获取数据" /> div> <div class="divContent"> <div id="divTip">div> div> div> body> html>
UserInfo.json
[
{
"name": "赵XX",
"sex": "男",
"email": "zhao@163.com" },
{
"name": "黄XX",
"sex": "女",
"email": "huang@163.com" },
{
"name":"谢XX",
"sex":"男",
"email":"1234567@qq.com" }
,
{
"name":"龚XX",
"sex":"男",
"email":"1234567@qq.com" } ,
{
"name":"梁XX",
"sex":"男",
"email":"1234567@qq.com" }
]
