demo.js
[
{
"name":"吴者然",
"sex":"男",
"email":"demo1@123.com"
},
{
"name":"吴中者",
"sex":"男",
"email":"demo2@123.com"
},
{
"name":"何开",
"sex":"女",
"email":"demo3@123.com"
}
]
demo.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>
<script type="text/javascript" src="js/jquery-1.10.1.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/demo.js",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>
效果图：
把 JSON 的后缀名改为 JS，放在 WEB 容器中则可以正常读取。但是为何呢？知道的朋友请在下面留言。
相关推荐
在Web开发中，由于浏览器的安全策略，JavaScript通常不能直接进行跨域请求，但jQuery提供了$.ajax和$.getJSON方法，通过JSONP（JSON with Padding）技术来实现在不同源之间获取JSON数据。下面将详细介绍如何使用...
jQuery中常用getJSON来调用并获取远程的JSON字符串，将其转换为JSON对象，如果成功，则执行回调函数。原型如下： jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据。 url: 发送请求的地址 data : (可选)...
jQuery的getJSON方法是一种非常方便的方式，用于从服务器异步获取JSON格式的数据，并且在数据返回时能够自动将其转换为JavaScript对象，简化了传统的AJAX调用方式。本文将详细介绍使用$.getJSON方法调用远程JSON字符...
4. **jQuery的$.getJSON()**：为了简化`$.ajax()`的JSON请求，jQuery提供了`$.getJSON()`函数，它会自动处理JSON解析： ```javascript $.getJSON('server_script.php', function(data) { // data是解析后的JSON...
当我们需要从后台获取数据并动态地展示在前端表格（table）上时，jQuery和JSON的结合就显得尤为重要。本篇文章将深入探讨如何使用jQuery从后台获取JSON数据，并动态生成HTML表格。 首先，理解JSON数据结构至关重要...
- `$ jq <filter> <file>`：将文件中的JSON数据传递给`jq`并应用过滤器。 - `-c`：输出结果为紧凑模式，即没有换行和缩进。 **示例**： 提取`location`字段的全部内容： ```bash $ jq '.location' json.txt { ...
在jQuery中，我们可以使用`.ajax()`或`.getJSON()`方法，加上`jsonp`类型和`callback`参数来发起JSONP请求。例如： ```javascript $.ajax({ url: 'http://example.com/data', type: 'GET', dataType: 'jsonp', ...
本文将深入探讨如何使用jQuery的Ajax功能来获取PHP生成的JSON数据。 首先，让我们理解标题中的关键词：“Ajax”是一种在不刷新整个页面的情况下与服务器进行异步通信的技术，它由四个主要部分组成：发送请求、接收...
在jQuery端，我们可以使用`$.ajax`或`$.getJSON`来发起异步请求。当请求成功返回时，接收到的JSON数据会被解析并渲染到页面上。分页通常需要一个分页导航栏，展示页码并监听用户的点击事件。当用户点击页码时，触发...
首先，理解`$.getJSON`是jQuery库提供的一个便捷方法，用于异步获取JSON格式的数据，同时支持跨域请求，这是由于它利用了JSONP（JSON with Padding）机制。 跨域请求通常在不同的域名或端口之间进行，由于浏览器的...
例如，要使用GET方法从服务器获取JSON数据，可以这样写： ```javascript $.ajax({ url: 'https://api.example.com/data.json', type: 'GET', dataType: 'json', success: function(data) { console.log(data);...
代码如下://栏目 //发送ajax请求 $.getJSON( “../../../Templet/GetInfoHandler.ashx”, //产生JSON数据的服务端页面 {id: “0”, sid: “1;2;3”, rid: Math.round(Math.random() * 10) }, //向服务器发出的查询...
1. **获取JSON数据**：这通常通过Ajax请求完成，例如使用`$.ajax()`, `$.getJSON()`, 或 `$.get()`函数从服务器获取JSON数据。 2. **解析JSON**：jQuery提供了一个`$.parseJSON()`方法，将JSON字符串转化为...
$.getJSON('/getData.aspx',{Name:$('#parm').val()},function(data){ var select = $('#DDLControl'); var options = select.attr('options'); $('option', select).remove(); $.each(data, function(index, ...
jq 是一款强大的命令行JSON处理器，它允许用户在终端上方便地对JSON数据进行查询、转换和操作。这个工具以其简洁的语法和丰富的功能，深受程序员和系统管理员的喜爱。以下是对`jq`工具的详细介绍。 ## 1. 安装jq ...
跨域问题是前端开发中不可避免的一个挑战，通过合理运用JSONP等技术，可以在不违反浏览器安全策略的情况下，实现跨域数据的高效获取与处理。需要注意的是，在实际应用中应考虑多种跨域解决方案，并结合项目需求选择...
- `$.getJSON()`: 专门用于GET请求JSON数据。 - `$.load()`: 加载HTML片段，并将其插入到DOM中。 8. **异步和同步请求** 默认情况下，AJAX请求是异步的，这意味着请求不会阻塞页面的其他操作。如果需要同步请求...
JSON数据通常包含温度、湿度、风向等字段，可以使用JavaScript的对象访问语法来获取这些值： ```javascript var temperature = data.weather.info; // 假设info字段包含温度 var humidity = data.weather.humidity;...