JS读取json 文件

最新推荐文章于 2025-05-23 14:51:24 发布
转载 最新推荐文章于 2025-05-23 14:51:24 发布 · 5.7k 阅读 · 22
文章标签：

#json #xhtml #javascript #ViewUI

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 

$.getJSON(url,[data],[callback])

url：加载的页面地址 
data: 可选项，发送到服务器的数据，格式是key/value 
callback:可选项，加载成功后执行的回调函数 
1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下: 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
{
"name" : "张国立" ,
"sex" : "男" ,
"email" : "zhangguoli@123.com"
},
{
"name" : "张铁林" ,
"sex" : "男" ,
"email" : "zhangtieli@123.com"
},
{
"name" : "邓婕" ,
"sex" : "女" ,
"email" : "zhenjie@123.com"
}
]

2.其次建一个页面用于获取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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >getJSON获取数据</ title >
< script type = "text/javascript" src = "js/jquery-1.8.2.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/userinfo.json", 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 >

 

da.json

通过ajax获取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
26
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title>通过ajax获取json数据的实现代码</title>
<script type= "text/javascript" src= "//www.jb51.net/jslib/jquery/jquery.min.js" ></script>
</head>
<body>
<div id= "ok" ></div>
<script>
$( function () {
     $.ajax({
       type: "POST" ,
       dataType: "json" ,
       url: "da.json" ,
       success: function (result) {
         var str = "" ;
                 $.each(result, function (index,obj){             
                 str += "<a href='" + obj[ "url" ] + "' target='_blank'><img src='" + obj[ "img" ] + "' /></a>" ;                  
                 });
         $( "#ok" ).append(str);
       }
     });
});
</script>
</body>
</html>

通过$.getJSON获取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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<title>通过$.getJSON获取json的代码</title>
<script type= "text/javascript" src= "//www.jb51.net/jslib/jquery/jquery.min.js" ></script>
</head>
<body>
<div id= "ok" ></div>
<script>
$( function (){
$.getJSON( "da.json" , function (data){
var $jsontip = $( "#ok" );
var strHtml = "" ; //存储数据的变量
$jsontip.empty(); //清空内容
$.each(data, function (infoIndex,info){
     strHtml += "<a href='" + info[ "url" ] + "' target='_blank'><img src='" + info[ "img" ] + "' /></a>" ;
})
$jsontip.html(strHtml); //显示处理后的数据
})
})
</script>
</body>
</html>

 

JavaScript读取JSON文件】使用JavaScript读取和解析JSON文件的方法
TechNovaX的博客
08-30 1504
【本文共计XXX字，内容专业，详细介绍了JavaScript读取和解析JSON文件的方法，包括使用XMLHttpRequest对象、fetch函数和jQuery的$.getJSON方法。通过以上方法，您可以轻松读取JSON文件并获取其中的数据，然后根据实际需求进行后续的数据处理和展示。在JavaScript中，我们可以使用几种方法读取和解析JSON文件，从而获取其中的数据并进行处理。JavaScript读取JSON文件】使用JavaScript读取和解析JSON文件的方法。
JavaScript读写json文件实例(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 772
JavaScript读写json文件实例(附完整源码)
JavaScript读取json文件
weixin_43956958的博客
02-06 1695
JavaScript 对象与 JSON 对象的区别：在 JavaScript 中，对象的属性名称可以用单引号 ‘’ 或双引号 “” 括起来，也可以完全省略引号。但是，在 JSON 中，所有属性名称都必须用双引号括起来。使用JavaScript函数JSON.parse() 将文本转换成JavaScript对象。来将 json对象转化为json字符串。在Vue.js中首选将json文件引入。
js读取json数据
weixin_33691700的博客
07-21 155
示例如下： &lt;script type="text/javascript" language="javascript"&gt; var languages = {    cn:{    lang:'ch',    name:"中文" }, en:{    lang:"英文",    name:"en" } }; document.write(languages.cn.name);&amp
js读取json文件
最新发布
高山景行，一尘不染
05-23 158
【代码】js读取json文件。
js读取服务器json文件,原生js读取json文件
weixin_39836803的博客
08-04 7078
方法一1.首先编写一个json文件：demo.json[{"name":"张三","sex":"男","email":"zhangsan@123.com"},{"name":"李四","sex":"男","email":"lisi@123.com"},{"name":"王五","sex":"女","email":"wangwu@123.com"}]2.js读取json文件window.onload...
js读写json文件实例代码
12-11
在JavaScript中，读写JSON文件通常涉及到客户端与服务器之间的交互，因为浏览器的同源策略限制了JavaScript直接操作本地文件的能力。然而，在特定环境下，如ActiveX对象在IE浏览器中的使用，可以实现本地文件的读写...
C#winform中读写json文件
01-02
以下是一个完整的示例，展示了如何在C# WinForm应用中读写JSON文件： ```csharp using System; using System.IO; using Newtonsoft.Json; public class Person { public string Name { get; set; } public int ...
js JSON的读取
limengmeng9006的专栏
12-06 547
js读取JSON的方法我接触到的有两种： 方法一：函数构造定义法返回 var strJSON = "{name:'json name'}";//得到的JSON var obj = new Function("return" + strJSON)();//转换后的JSON对象 alert(obj.name);//json name 方法二：js中著名的eval函数 var strJSON
js读取解析JSON数据（转）
WGH100817的博客
02-23 1169
JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。 本文主要是对JS操作JSON的要领做下总结。 在JSON中，有两种结构：对象和...
JS获取json文件内容并处理参考
09-14
利用jquery的post功能获取json的内容并作后续处理， 本例子需要在web环境下跑 本例子需要在web环境下跑 本例子需要在web环境下跑
json进阶(一)js读取解析JSON类型数据
IT全栈 华强工作室
07-23 5万+
js读取解析JSON类型数据 一、什么是JSON？ JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式，同时，JSON是JavaScript原生格式。非常适合于服务器与JavaScript的交互。 二、为什么使用JSON而不是XML 他们都是这样说的：尽管有许多宣传关于XML如何拥有跨平
JavaScript读取JSON文件
热门推荐
Bruce_wjh的博客
03-13 5万+
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。有关于json的相关信息，可参考：json百度百科。 1、HTML文档 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;R
js读取json文件（原生和jQuery）
沧笙踏歌的博客
04-19 2526
1.首先编写一个json文件：demo.json [ { "name":"张三", "sex":"男", "email":"zhangsan@123.com" }, { "name":"李四", "sex":"男", "email":"lisi@123.com" }, { "name":"王五", "sex":"女", "email":"wangwu@123.com" ...
js读取json文件数据
weixin_40841731的博客
05-06 696
如果已经部署到线上了，可以用域名加文件路径，没有的话就http://localhost:8080/resource/default/static/data/mapdata.json 这种方式拿。注意 url 不能写成 ../../resource/default/static/data/mapdata.json 这种形式，这种url拿不到数据。localhost可以改成ip地址，8080端口改成自己项目的端口。
js读取json文件中的json数据
scbiaosdo的博客
07-04 5879
https://blog.youkuaiyun.com/qq_36371218/article/details/76066671?locationNum=3&amp;fps=1
javascript读写json文件
01-12
### 使用 JavaScript 读取和写入 JSON 文件 在浏览器环境中，由于安全原因无法直接访问本地文件系统来读写 JSON 文件。然而，在 Node.js 环境下可以轻松实现这一功能。 #### 一、Node.js 中读取 JSON 文件 为了从文件中加载 JSON 数据并将其解析为对象，可利用 `fs` 模块中的同步方法 `readFileSync()` 或者异步版本 `readFile()`. 下面是一个简单的例子展示如何完成此操作： ```javascript const fs = require('fs'); // 同步方式读取json文件 try { const dataBuffer = fs.readFileSync('data.json'); const jsonData = JSON.parse(dataBuffer.toString()); console.log(jsonData); } catch (err) { console.error(err.message); } ``` 对于更复杂的场景推荐采用回调函数处理错误以及数据流的方式来进行非阻塞式的 I/O 操作[^2]. #### 二、Node.js 中写入 JSON 文件 当需要保存 JavaScript 对象到磁盘上的 JSON 文件时，则应该先通过 `JSON.stringify()` 方法序列化该对象成字符串形式再调用 `writeFileSync()` 函数存储至目标位置: ```javascript const fs = require('fs'); let myObject = { name: 'Alice', age: 25 }; // 将js对象转换为json字符串 const jsonString = JSON.stringify(myObject); // 写入json文件 try { fs.writeFileSync('output.json', jsonString); console.log('成功写入文件'); } catch (err) { console.error(err.message); } ``` 同样地，在生产环境建议使用带有回调机制的 `writeFile()` 实现更好的性能表现.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值