js读取json文件

1. 原生的两种方法

1.1 XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET', 'data.json', true);
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {const data = JSON.parse(xhr.responseText);// 对象中的属性可以像平常一样访问console.log(data);}
};
xhr.send(null);

1.2 使用浏览器原生的fetch API

fetch('data.json').then(response => response.json()).then(data => {// 在这里可以操作读取到的 JSON 数据对象console.log(data);}).catch(error => {// 处理错误情况console.error('Error reading the JSON file:', error);});

2. 引入库的方法

2.1 Axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>axios.get('data.json').then(response => {const data = response.data;// 对象中的属性可以像平常一样访问console.log(data);}).catch(error => {console.error('Error reading the JSON file:', error);});

2.2 jQuery中的getJSON

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>$.getJSON("data.json", function (data) {console.log(data)
});

2.3 Node.js中的fs模块

const fs = require('fs');fs.readFile('data.json', 'utf8', (err, data) => {if (err) {console.error('Error reading the file:', err);return;}const jsonContent = JSON.parse(data);// 对象中的属性可以像平常一样访问console.log(jsonContent);
});

3. 跨域问题

3.1 使用Live Server

在这里插入图片描述

3.2 在本地启动一个服务

给网页添加一个域名, 比如localhost, 我们可以使用python或者nodejs在本地启动一个服务, 这里以python3为例:

python -m http.server 8000

3.3 修改本地浏览器设置

修改本地浏览器设置, 以Windows平台谷歌浏览器为例, 启动时添加参数–allow-file-access-from-files
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/159593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用EasyPlayer播放H.265视频流

使用EasyPlayer播放H.265视频流 EasyPlayer流媒体视频播放器 EasyPlayer流媒体视频播放器 EasyPlayer流媒体视频播放器可支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff0c;能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放&#xff0c;并且已实现网页…

Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

遇到这种报错 先去相关页面搜索关键字 定位到具体的报错代码 Cannot read properties of undefined (reading ‘resetFields’)" 关键字&#xff1a;resetFields 此方法作用&#xff1a;对整个表单进行重置 将所有字段值重置为初始值并移除校验结果 报错场景&#xff1a;…

坚鹏:湖北银行数字化转型背景下银行运营管理创新培训圆满结束

湖北银行正式成立于2011年2月27日&#xff0c;总部设在武汉。现有员工5000余人。营业网点从成立之初的93家增长至241家&#xff0c;实现全省17个市州、59个县域营业网点全覆盖。截至2022年末&#xff0c;全行资产总额4026亿元&#xff0c;存款总额2956亿元&#xff0c;贷款总额…

人工标签不准确的一种解决方案:PCA降维可视化筛选正样本

背景 在实际的业务场景里&#xff0c;用会话文本构建模型&#xff08;机器学习/深度学习&#xff09;来做意图分类之类的任务时&#xff0c;经常会出现人工打标不够准确的问题&#xff0c;标签都不准确的话模型当然无法学习到有效信息了。这个问题真的非常头疼…除了与业务沟通…

d3dcompiler_47.dll缺失怎么修复,d3dcompiler_47.dll的作用有哪些

d3dcompiler_47.dll丢失是一种常见的电脑问题。如果你遇到了这个问题&#xff0c;不要惊慌&#xff0c;下面的方法可以帮助你解决。本文将详细介绍解决d3dcompiler_47.dll丢失问题的步骤&#xff0c;让你手把手地学会。 一.解决d3dcompiler_47.dll丢失问题的步骤 解决方法一&a…

CSS伪类选择器详细讲解

前言 伪类选择器在CSS中起到的作用可以说是至关重要的&#xff0c;如果CSS没有伪类选择器&#xff0c;有很多效果都要借助js来完成&#xff0c;这样不仅代码量增加&#xff0c;维护起来你难度也大。这样程序员的工作量大&#xff0c;也违背了CSS诞生的作用&#xff0c;就是提高…

重磅!TikTok Shop将以新方式重启印尼业务

据报道&#xff0c;TikTok将通过与印尼电商平台合作的方式重启电商业务。 据悉&#xff0c;印尼合作社和中小企业部就TikTok Shop将在印尼重新开业的消息发表了讲话。合作社和中小企业部Temmy Satya Permana证实TikTok Shop将在印尼重新开业的消息。他表示&#xff0c;TikTok …

使用 Python脚本在3DMAX中加载图像和读取图像中的像素值

如何使用Python在3dmax中加载和显示图像文件&#xff1f;我们先看下面的代码&#xff1a; *测试的3dmax文件和图像文件位于同一目录中。 from MaxPlus import BitmapManagerimage_file_path rje_gray_02_4k.exrbmp_storage MaxPlus.Factory.CreateStorage(17)bmp_info bmp…

探索数字孪生的潜力:五个最有前景的行业

数字孪生技术正在引领一场新的工业革命&#xff0c;其潜力正在被全球范围内的行业所认识和利用。在未来&#xff0c;数字孪生技术将在许多行业中发挥重要作用&#xff0c;本文带大家共同解析未来数字孪生技术五个最有发展前景的行业。 1.制造业 数字孪生技术可以帮助制造商模…

Leetcode——169 多数元素

我的答案 class Solution {public int majorityElement(int[] nums) {int len nums.length;Arrays.sort(nums);int count 1;int res 0;if(len 1){return nums[0];}for(int i0; i<len-1; i){if(nums[i]nums[i1]){count;}else{count 1;}if(count>len/2){res nums[i]…

【问题定位】通过看Mybatis源码解决系统问题

开发需求好好的&#xff0c;运维同事突然发现了一个问题&#xff0c;某个任务的详情页面加载不出来。看日志&#xff0c;系统在进行查询操作的时候抛出空指针异常。感觉是Mybatis内部异常&#xff0c;所以就跟踪源码看下Mybatis运行到哪一步报错的。 DefaultSqlSession#select…

2023年亚太杯数学建模思路 - 案例:粒子群算法

文章目录 1 什么是粒子群算法&#xff1f;2 举个例子3 还是一个例子算法流程算法实现建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是粒子群算法&#xff1f; 粒子群算法&#xff08;Pa…

PostgreSQL导出表结构带注释

我们在平时开发过程中&#xff0c;经常会在字段的注释中&#xff0c;加上中文&#xff0c;解释字段的相关含义&#xff0c;也可以避免时间太久忘记这个字段代表什么&#xff0c;毕竟英文水平不好。我们可能要经常整理数据库表结构&#xff0c;提供他人去收集数据&#xff0c;但…

SQLite3 数据库学习(四):Qt 数据库基础操作

参考引用 SQLite 权威指南&#xff08;第二版&#xff09;SQLite3 入门 1. 创建连接执行 sql 语句 在 Qt 中使用数据库要在工程文件中添加QT sql1.1 main.cpp #include "createsqlapp.h" #include <QApplication> #include <QSqlDatabase> #include &l…

香港高端人才通行证计划申请(包括条件)你需要知道的这些真相!

香港高端人才通行证计划申请&#xff08;包括条件&#xff09;你需要知道的这些真相&#xff01; 香港高才通计划从刚推出就带着“光速获批“的光环&#xff0c;吸引了大批高学历和高收入人士&#xff0c;后续也因它申请要求简单、明确&#xff0c;获批率高等优势&#xff0c;火…

主机dbeaver访问gitlab容器中的pg

映射5432端口- 5431:5432或者从docker客户端查看 version: 3.6 services:web:image: gitlab/gitlab-ce:latestrestart: alwayshostname: localhostenvironment:GITLAB_OMNIBUS_CONFIG: |external_url http://localhost:8929gitlab_rails[gitlab_shell_ssh_port] 2224ports:- …

文心一言 VS 讯飞星火 VS chatgpt (140)-- 算法导论11.4 5题

五、用go语言&#xff0c;考虑一个装载因子为a的开放寻址散列表。找出一个非零的a值&#xff0c;使得一次不成功查找的探查期望数是一次成功查找的探查期望数的 2 倍。这两个探查期望数可以使用定理11.6 和定理 11.8 中给定的上界。 文心一言&#xff0c;代码正常运行&#xf…

springboot宠物领养系统-计算机毕设 附源码 44261

springboot宠物领养系统 摘 要 网络发布信息有其突出的优点&#xff0c;即信息量大&#xff0c;资源丰富&#xff0c;更新速度快等&#xff0c;很符合人们希望以捷、便利的方式获得最多最有效信息的要求。本系统就是一个网上宠物领养系统&#xff0c;为宠物爱好者提供一个信息…

pyqt5 窗口调用网页高德地图kpi,进行实时地图导航

作为主项目功能的一部分&#xff0c;这部分我想单独记录下来 一&#xff0c;注册高德kpi【进行实名认证】 高德开放平台 | 高德地图API (amap.com) 二&#xff0c;申请Key 三&#xff0c;进入路径规划-API文档-开发指南-Web服务 API|高德地图API (amap.com) 找到你需要的路径…

【必读】从零开始,一步步教你安装nginx,搭建个人博客网站!

nginx搭建个人网站 Nginx是一款轻量级Web服务器、反向代理服务器以及电子邮件代理服务器&#xff0c;并且具有高并发连接处理能力和低内存消耗的特点。它也可以用于负载均衡和缓存控制等功能。 功能&#xff1a; 静态网站服务器&#xff1a;Nginx可以用来作为静态网站服务器&am…