js 读取 json文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 读取 json文件相关的知识,希望对你有一定的参考价值。

参考技术A 如果要使用js读取json文件,那么ajax操作是必须的了。原生ajax有点麻烦,我想你们项目一定用了什么js库,这里给个jquery的例子:<br>$.get('xx.json路径', function(data)<br> alert(data); // data即为json文件内容里的json数据<br>, 'json');如果把这个文件的内容读取为纯文本,可以修改$.get的最后一个参数json为text,或者删掉这个参数,默认也是text。

javascript如何读取本地json文件

我有一个.json格式的文件,文件内容举例如下:

a.json
[

"name":"zhangsan",
"sex":"man",
"address":"hangzhou",
"home":"http://www.zhangsan.com"
,

"name":"lisi",
"sex":"wumen",
"address":"beijing",
"home":"http://www.lisi.com"

]
我的代码如下:

<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

<script src="jquery-1.3.2.js"></script>

<script>

$(function()

$("#loaddata").click(function()

//使用getJSON方法读取json数据,

//注意:info.json可以是不同类型文件,只要其中的数据为json类型即可

$.getJSON('a.json',function(data)

var html = '';

$.each(data,function(i,item)

html +=
'<tr><td>'+item['name']+'</td>'+

'<td>'+item['sex']+'</td>'+

'<td>'+item['address']+'</td>'+

'<td>'+item['home']+'</td></tr>';

);

$('#title').after(html);

//after方法:在每个匹配的元素之后插入内容。

);

);

);

</script>

</HEAD>

<input type="button" value="加载数据" id="loaddata" />

<BODY>

<table id="infotable" >

<tr id="title"><th>姓名</th><th>性别</th><th>地址</th><th>主页</th></tr>

</table>

</BODY>

</HTML>

但是一直加载不成功,我想让json文件里的内容显示在页面上,搞了好久了,求教啊~~~

我试了一下可以啊……目录层级是对的吧

参考技术A

可以用jQuery方便的读取json文件,示例代码如下:

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
$(document).ready(function() 
  $.getJSON('area.json',function(json)
    var data = json;
  );
);
</script>

以上是关于js 读取 json文件的主要内容,如果未能解决你的问题,请参考以下文章

javascript如何读取本地json文件

vite2 读取json文件的几种方法

php,JavaScript 如何读取并修改json文件?

JS动态加载JSON文件并读取数据

HTML5怎么读取json文件

06 js 读取 json 文件