JS如何在本地读取json等文件

点击“下载”按钮，会把文本域中的内容全部作为一个html后缀文件下载下来，各流程效果如下面几张图：

下载按钮点击示意

出现下载确认框（根据浏览器的设置不同也可能直接下载），然后名称默认就是testhtml。

默认就是testhtml名称

然后对应保存目录就多了个类似下图的文件：

保存好的testhtml文件截图示意

双击该testhtml文件可以在浏览器中正常浏览，说明，保存信息无误。

testhtml在浏览器中访问的效果

触发下载的JS代码就几行：

对于非文本文件，也是可以直接JS触发下载的，例如，如果我们想下载一张，可以把这张转换成base64格式，然后下载。

代码示意：

不止是html文件，txt, json等只要内容是文本的文件，都是可以利用这种小技巧实现下载的。

在Chrome浏览器下，模拟点击创建的<a>元素即使不append到页面中，也是可以触发下载的，但是在Firefox浏览器中却不行，因此，上面的funDownload()方法有一个appendChild和removeChild的处理，就是为了兼容Firefox浏览器。

download属性从Edge13开始支持，理论上，edge也应该支持直接JS触发的浏览器文件下载，但我手头上并无相关浏览器，无法确定真实情况如何，欢迎有条件的小伙伴帮忙测下告知结果。

就这些吧，感谢阅读！

jquery 中有一个 load 可以加载远程的内容

<script type="text/javascript">

< !--$(document)ready(function() {

alert("");

$("#jsonid")load(">

把你的这个txt文件，改成json文件（js也可以）；

你可以做一个测试，将你的json文件和你的调用js文件和你的页面放在一个目录下；然后$getJSON(url, function(data){ // todo }); // 这里的url直接是xxjson

如果你的页面和js文件和json文件不再一个目录，就要将url写成页面相对于json文件的路径。

或者等等不一而足。

gloadScript = function (uri, cb, charset) {//load 单个请求

var _script = documentcreateElement("script");

_scripttype = "text/javascript";

_scriptcharset = charset || "utf-8";

_script_fun = typeof cb != "undefined" cb : new Function();

_script[documentall "onreadystatechange" : "onload"] = function () {

if (documentall && thisreadyState != "loaded" && thisreadyState != "complete") { return; }

this_fun(this);

this_fun = null;

this[documentall "onreadystatechange" : "onload"] = null;

var _t = this;

_tparentNoderemoveChild(_t);

};

_scriptsrc = uri;

documentgetElementsByTagName("head")item(0)appendChild(_script);

};

loadScript(url,function(){consolelog(json)},"utf-8")//把你的文本文件换成HTML，url是html地址，json是你的json变量的变量名。jsonp格式获取。

在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式：

1一种为使用eval()函数。

2 使用Function对象来进行返回解析。

用eval函数来解析，并且使用jquery的each方法来遍历

用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器 返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。

这里首先给出JSON字符串集，字符串集如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

代码如下:

var data="

{

root:

[

{name:'1',value:'0'},

{name:'6101',value:'北京市'},

{name:'6102',value:'天津市'},

{name:'6103',value:'上海市'},

{name:'6104',value:'重庆市'},

{name:'6105',value:'渭南市'},

{name:'6106',value:'延安市'},

{name:'6107',value:'汉中市'},

{name:'6108',value:'榆林市'},

{name:'6109',value:'安康市'},

{name:'6110',value:'商洛市'}

]

}";

var dataObj=eval("("+data+")");//转换为json对象

alert(dataObjrootlength+"个对象");

for(var i=0;i<dataObjrootlength;i++){

var obj=dataObjroot[i];

alert(objName+"--"+objvalue);

}

由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语 句（statement）来执行。

第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析

1

2

3

var json='{"name":"CJ","age":18}';

data =(new Function("","return "+json))();

此时的data就是一个会解析成一个 json对象了

假如你这个json对象用变量j表示

用下面代码

var t='', k=jstudentjson;

//得到数组k

for(var i=0;i<klength;i++){

    var m=k[i];

    t+=['<tr><td>'+m['学号'],m['姓名'],m['性别'],m['班级']+'</td></tr>']join('</td><td>');

}

t='<table><tbody>'+t+'</tbody></table>';

//得到表格html代码t

以上就是关于JS如何在本地读取json等文件全部的内容，包括:JS如何在本地读取json等文件、如何用Javascript通过URL获取json文件内容、JS怎么读取txt文件中的json数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！