在html中请求本地json文件的三种方法

最新推荐文章于 2024-05-22 21:31:48 发布
最新推荐文章于 2024-05-22 21:31:48 发布
阅读量1.7w 收藏 27
点赞数 7
文章标签： 前端 数据可视化 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36290842/article/details/115593028
版权

文章目录

引言

在使用D3请求本地json文件的时候出现了跨域问题，探索了下整理了想到的三种解决方法。

一、问题定位

先看下我出问题的程序，这个程序是在html页面中，用d3抓取本地的bar.json 作为数据源，操作dom来用svg绘制柱状图。程序代码如下:

<!DOCTYPE html>
<html>

<head>
  <title>D3 Page</title>
  <script type='text/javascript' src='Scripts/d3.js'></script>
  <script type='text/javascript' src='test.js'></script>

  <link href="styles/char_6.css" rel="stylesheet">
</head>

<body>
</body>
<script type='text/javascript'>

  
  d3.json('bar.json', function (json) {
    
    return json
  }).then(function
最低0.47元/天 解锁文章
蓝色香蕉船
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
jQuery ajax读取本地json文件的实例
10-19
下面小编就为大家带来一篇jQuery ajax读取本地json文件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML读取json文件示例程序.zip
07-13
HTML文件读取json文件，将文件内容转换为Object并赋值给变量，可以进行索引修改
HTML5实现本地JSON文件的读写
qq_45137726的博客
06-11 3987
HTML5实现本地JSON文件的读写
【小白向】从网页获取json/jsonp文件，使用Python导出为json格式
最新发布
u011239030的博客
05-22 681
从网页获取json/jsonp文件的主要方法，此外如果遇到了非json格式的数据，可以使用Python进行简单的数据处理，能够一键导出为json格式
html页面读取json数据,javascript – 尝试加载本地JSON文件以使用JQuery在html页面中显示数据...
weixin_29306261的博客
06-03 691
嗨，我试图加载本地JSON文件使用JQuery来显示数据，但我有一些奇怪的错误。我可以知道如何解决这个问题。$(document).ready(function(e) {$.getJSON( "priorities.json" , function( result ){alert(result.start.count);});});我只是提醒了JSON数据的数量。我的JSON文件位于该html文件...
HTML读取json文件（传递给变量）
a1367666195的博客
07-13 2万+
在网上找了一圈HTML如何读取json文件，发现解决方案挺多，但是最后都是直接在命令行窗口打印出来，没法进一步使用，最后查查资料捣鼓出一条可行路径。 附上示例程序。 1.1 json文件内容 json文件内容以网上常见的为例，命名为*“a123.json”* [ { "name":"张国立", "sex":"男", "email":"zhangguoli@123.com" }, { "name":"张铁林", "sex":"男", "email":"zhangtieli@123.com
在 .html 中读取本地 .json 数据文件的示例（使用 axios）/ 使用 FormData 处理 axios 参数
Lyrelion的博客
08-24 2123
前言：之前考虑过 jquery 中的 getJson() 方法，感觉不熟练，容易忘，加上现在是在用 Vue3 的声明式渲染写页面，就更不想把他们和 jquery 一起用了，使用 axios 是很好的解决方案 1. axios 读取 本地 .json文件 的基本使用 在官网中下载 axios,min.js （CDN 地址 打开后，复制内容，存入新文件即可） 在页面中引入 axios：<scriptsrc="./axios.min.js"></script> 使用 axios：..
HTML/JavaScript中引入json文件
热门推荐
qq_17627195的博客
05-06 2万+
方法一：通过<script >标签引入 第一步：在json文件中定义一个变量指向json数据（一些IDE会报错，不过不用管）。 var jsonData = { // json数据 }; 第二步：在HTML文件中使用<script>标签引入json文件 <script type="text/javascript" src="./xxx.json"></script> <script> // 控制台输出json console.log("json
html页面加载json数据,在html中显示JSON数据的方法
weixin_43617604的博客
11-24 1613
【代码】html页面加载json数据,在html中显示JSON数据的方法。
如何实现html静态文件通过本地文件获取数据
LJWWD的博客
08-10 2100
有一个这样的需求，并且最后要求是可点击的html静态文件，不要链接数据库 由于前端接触不多，最开始就尝试了一下之前比较熟练的ajax var data = 0; $.ajax({ url: '../sys.log', type: 'GET', data: data, async:true, //是否异步 dataType:"jsonp", //
在vue中读取本地Json文件的方法
10-18
在本文中，我们将详细介绍如何在Vue中读取本地JSON文件。 首先，要实现这一功能，我们需要引入一个外部插件——vue-resource。vue-resource是Vue.js的一个插件，它提供了一个API来发送HTTP请求，包括GET、POST等，...
通过jquery的ajax请求本地的json文件方法
01-21
自己学习jquery的ajax的经历，记录一下 ajaxTestDemo.html 在body里面放一个id为... //json文件位置 url:./data/shuju.json, //返回数据格式为json dataType: json, //请求成功完成后要执行的方法 success: fun
利用jsonp解决js读取本地json跨域的问题
10-17
在描述中提到，当尝试使用jQuery的`$.ajax`方法读取本地JSON文件时，谷歌浏览器会因为安全原因报跨域错误，而在火狐浏览器中则可能正常工作。 **一、问题描述** 在JavaScript中，跨域访问通常受到浏览器同源策略的...
详解VUE调用本地json的使用方法
10-17
在Vue.js应用中，调用本地JSON文件是常见的数据加载方式，特别是在开发阶段。这篇文章将详细解释如何在Vue中实现这一功能，同时提供一个实际的示例。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据...
d3读取json，实现路径的跟踪
aganliang的专栏
07-13 2278
d3.json的用法： d3.json(datauri).then(function(data){ do someting here }).catch(function(error){something wrong}) 1.d3.json异步读取json 2.json是一个geojson，类型是linestring 3.数据源从只有一个coordinate，每10毫秒增加一个coordinate，layer自动绘制数据源。 4.使用了map.jumpto({})，map.panto()成员变量。
html读取json文件+数据渲染
weixin_39293537的博客
02-24 3546
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title id="title"></title> <script type="text/javascript" src="../../js/jquery.js"></script> <script src="../../js/bootstrap.min..
通过html5实现本地json文件的读取和保存
pipizhou16的博客
09-09 5107
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
html加载本地JSON文件
05-31
要在HTML中加载本地JSON文件，可以使用`XMLHttpRequest`对象来读取本地文件并将其作为JSON数据来解析。以下是一些简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加载本地JSON文件</title> </head> <body> <div id="output"></div> <script> // 创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 打开一个GET请求，指定JSON文件的路径 xhr.open('GET', 'data.json', true); // 设置响应类型为JSON xhr.responseType = 'json'; // 当请求完成时执行 xhr.onload = function() { if (xhr.status === 200) { // 如果请求成功，解析JSON数据并输出到页面 var data = xhr.response; document.getElementById('output').innerHTML = JSON.stringify(data); } else { // 如果请求失败，输出错误信息 console.log('请求失败，错误码：' + xhr.status); } }; // 发送请求 xhr.send(); </script> </body> </html> ``` 在这个示例中，我们使用`XMLHttpRequest`对象读取了一个名为`data.json`的本地JSON文件，并将其解析为JSON对象，最后将其输出到页面上。需要注意的是，这个示例中的页面和JSON文件必须位于同一个目录下，且需要通过HTTP服务器来访问，否则会出现跨域问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值