<
meta
charset
=
"
utf-8
"
>
<
title
>
</
title
>
<
script
src
=
"
https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
"
>
</
script
>
<
script
>
$
(
document
)
.
ready
(
function
(
)
{
$
(
"button"
)
.
click
(
function
(
)
{
$
.
getJSON
(
"data.json"
,
function
(
result
)
{
$
(
"div"
)
.
append
(
result
[
0
]
.
name
)
;
}
)
;
}
)
;
}
)
;
</
script
>
</
head
>
<
button
>
获取 JSON 数据
</
button
>
<
div
>
</
div
>
</
body
>
</
html
>
jQuery.getJSON()等同于:
json
文件是一种轻量级的
数据
交互格式。一般在
jquery
中使用get
JSON
()方法读取,具体示例代码如下,感兴趣的朋友可以参考下哈,希望可以帮助到你
$.get
JSON
(url,[data],[callback])
url:加载的页面地址 data: 可选项,发送到服务器的
数据
,格式是key/value callba...
dataType:'PageType',
success:'successReturnFunction',
async:'AsynchronizationIsTureOrFalse',
error: 'falseReturnFunction'
<script src="https://code.
jquery
.com/
jquery
-3.1.1.min.js"></script> // 这个是在线的
JQuery
JS
<script>
$(document).ready(function () {...
HTML本身并不直接支持通过
jQuery
来读取
本地
JSON
文件,因为JavaScript的安全策略禁止浏览器直接从文件系统加载资源。然而,你可以借助一些技术绕过这个限制:
1. 使用`FileReader API`:
jQuery
配合`FileReader`可以读取
本地
文件,然后解析成
JSON
。首先创建一个`<input type="file">`元素让用户选择文件,然后异步读取文件内容。
```javascript
$(document).ready(function() {
$('#fileInput').change(function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var
json
Data =
JSON
.parse(reader.result);
// 现在你可以处理读取到的
JSON
数据
了
reader.readAsText(file);
2. 利用`Blob`和`fetch`或`XMLHttpRequest`: 当然,更现代的方式是使用`fetch`请求,先将文件转化为`Blob`对象,再发送到服务器处理:
```javascript
$(document).ready(function() {
$('#fileInput').change(function(e) {
var file = e.target.files[0];
fetch(URL.createObjectURL(file))
.then(response => response.
json
())
.then(
json
Data => {
//
json
data is now available
.catch(error => console.error('Error:', error));
这里`URL.createObjectURL()`用于生成临时URL,允许跨域访问。