使用JS (以及jquery和/或AJAX)在HTML中加载本地JSON文件；ANSWER=IMPOSSIBLE
使用JS（以及jQuery和/或AJAX）在HTML中加载本地JSON文件是可能的。
在HTML中加载本地JSON文件可以通过以下步骤实现：
- 创建一个HTML文件，并在文件中引入jQuery库（如果需要使用jQuery）和自己编写的JavaScript文件。
- 在JavaScript文件中，使用AJAX（或jQuery的$.ajax()函数）来加载本地JSON文件。可以使用相对路径或绝对路径指定JSON文件的位置。
- 在AJAX请求成功的回调函数中，可以通过response对象获取到加载的JSON数据。可以使用JSON.parse()函数将JSON字符串转换为JavaScript对象，以便在代码中使用。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Load Local JSON</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="json-data"></div>
</body>
</html>$(document).ready(function() {
$.ajax({
url: 'data.json', // JSON文件的路径
dataType: 'json',
success: function(response) {
// JSON加载成功后的处理逻辑
var jsonData = JSON.parse(response);
$('#json-data').text(JSON.stringify(jsonData));
},
error: function(xhr, status, error) {
// JSON加载失败后的处理逻辑
console.log('Error: ' + error);
}
});
});在上述示例中，我们通过AJAX请求加载了名为"data.json"的本地JSON文件，并将加载的JSON数据显示在页面上的一个div元素中。
请注意，由于浏览器的安全限制，直接使用AJAX加载本地文件可能会导致跨域问题。为了避免这个问题，可以将HTML文件和JSON文件放在同一个域名下，或者使用一个本地服务器来提供文件。
相关·内容
2回答
将映射连接到用于循环的json文件
javascript、jquery、arrays、json、loops
这可能是一个非常简单的问题，但我似乎在任何地方都找不到答案或解释。
我如何以及在哪里连接我放置在JSON中的图像和名称的映射(图像文件来自哪里)，因为图像需要附加在我的浏览器窗口中。我对JSON、循环和JS非常陌生。
这是我的代码，如果您需要查看它，了解我是如何制作它的。
贾森；
{ "main_object": {
"imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoo
浏览 3提问于2016-03-24得票数 0
回答已采纳
1回答
googlecharts在本地服务器上运行时不加载json数据
php、json、google-visualization
我计划使用googlecharts来绘制存储在本地数据库中的数据- googlecharts代码也将存储在本地服务器上。我使用XAMPP创建了一个本地目录(')。在进入项目之前，我正在测试一个示例脚本(我在google搜索中找到的)，它从一个json文件(从php脚本调用)中获取数据，然后将其提供给googlecharts绘图函数。按照建议，这3个文件都存储在文件夹'C:\xampp\htdocs‘中，但当我在浏览器()中加载页面时，页面显示为空白(在Chrome、IE和Firefox上)。当我运行googlecharts脚本并将数据硬编码到HTML中时，它工作得很好。我已经在
浏览 1提问于2016-03-18得票数 0
3回答
尝试从JSON加载单词时出错
javascript、jquery、html、css、json
我有一个问题，在我的JSON的话不会加载到我的网页，图像已经工作，幸运的是..
我已经有需要通过JSON加载到我的网页中的图像了。我还需要一些词把JSON加载到我的网页上，
{"main_object": {
"imagesJ": ["beak", "cat", "egg", "meel", "milk", "passport", "spoon", "thee"],
"wordsJ": ["næb
浏览 2提问于2016-03-29得票数 0
3回答
为什么JavaScript不显示解析的json数据？
javascript、json、eval
这是我通过getjson从服务器收到的JSON数据的格式：{"options":"smart_exp"}，{"options":"user_int"}，{"options":"blahblah"}。我需要向json追加用户输入。我尝试这样做:首先将其转换为javascript对象，附加用户输入，再次转换为json对象并将其发送回服务器以进行数据库更新。我已经使用eval()将json转换为javaScript对象。现在不能操作javascript对象。如果我将javascript对象转换回json对
浏览 1提问于2010-10-27得票数 0
回答已采纳
3回答
在页面的div标记中通过ajax请求加载图形
javascript、jquery、ajax、google-visualization
我想放的图表就是代码。
graph.php
<?php $mak="1";
$sen="5";
?>
<html>
<head>
<title>Pollution Mapper</title>
<!-- Load jQuery -->
<script language="javascript" type="text/javascript"
src="http://ajax.goog
浏览 3提问于2014-02-23得票数 0
回答已采纳
2回答
将JSON数据加载到jQuery组件
jquery、html、json、jsonp
我想在网页上显示来自外部JSON文件的数据。
data.json：
{"users":[
{
"firstName":"S",
"lastName":"S",
"joined": {
"month":"January",
"day":12,
"year":2012
}
},
{
浏览 3提问于2015-04-25得票数 0
回答已采纳
2回答
如何使用javascript从外部域读取JSON
json、jsonp、getjson、stringify
我是javascript的新手。我有一个可以在本地读取JSON文件的工作代码，现在JSON移到了另一个域，我无法读取它。我在JSONP上看到了所有的问题，但没有成功地让它工作。
原始代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./index_files/
浏览 0提问于2016-04-22得票数 0
1回答
为什么Json文件内容没有显示在html页面中？
javascript、json
我是javascript的新手，我想用javascript显示json文件的内容。我的问题是html页面不能显示Json文件的内容，而且是空白的！！我知道我获取它是正确的。我在本地驱动器上有这个名为data.json的Json文件。我还更改了文件的地址，但它不起作用。
你能告诉我原因是什么吗？谢谢,
我把代码放在这里
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
浏览 1提问于2013-06-19得票数 0
1回答
如何将python或本地数据调用到js google.visualization.DataTable()中？
javascript、ajax、csv、flask、google-visualization
我已经工作了两个星期，试图获得一个CSV文件(本地)来加载google.visualization.DataTable()。或者，我希望Ajax能够调用我创建的Python烧瓶API。我想动态创建甘特图。
我的代码：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
浏览 23提问于2022-02-25得票数 0
回答已采纳
2回答
将JSON传递给JQuery函数Javascript
javascript、jquery、html、json、google-apps-script
我们有一个非常simpel的Google脚本Web应用程序，它的目的是在HTML下拉列表中显示JSON数据。JSON文件存在于Google中。灵感代码：
但是，当我们试图‘获取Json’时，没有数据被加载到下拉列表中：
index.html
<!DOCTYPE html>
<html>
<br> <br>
<center>
<head>
<base target="_top">
</head>
<body>
浏览 1提问于2015-12-04得票数 0
回答已采纳
2回答
我无法理解为什么在使用选项卡时，jQuery UI 1.10既不支持ajaxSettings.error也不支持jqXHR.fail
jquery、html、jquery-ui
我将jQuery UI库升级到了1.10版本。根据文档，下面的代码应该可以工作，但事实并非如此。如果是我做错了，还是他们的新jQuery UI库充满了bug，请告诉我。
如果你想试试下面的代码，我设置了
这些选项卡将提取以下JSON字符串：
对于"GOOD Json“选项卡：
{
"html":"This is HTML text from good Json",
"msgWarning":"This is message text from good Json",
"msgSuccess":"
浏览 4提问于2013-03-12得票数 1
3回答
在Django中，如何传递用于Ajax / jQuery的JSON数据？
jquery、python、json、ajax、django
我试图使用Django中的JSON数据来提供用户选项来搜索和选择。我可以将数据加载和扩展到html，但不确定如何在jQuery中使用它。如果我将我的jQuery链接到服务器外的某个网站，我的代码工作得很好。我是说，如果我能把它联系起来：
$.getJSON("http://meme.computer/stack/data.json", function(data) {
我的代码是：
views.py:
from django.shortcuts import render
from aceform.forms import RequestForm
import json
de
浏览 6提问于2017-03-15得票数 1
回答已采纳
1回答
为什么本地Json文件内容没有显示在html页面中？
javascript、html、angularjs、json
我想用AngularJs (ng-Reapeat)来显示json文件的内容，我的问题是html页面不能显示Json文件的内容，而且是空白的！！我在本地驱动器上有这个名为JsonData.json的Json文件。我还更改了文件的地址，但它不起作用。
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/angular.js"></script>
浏览 3提问于2017-02-25得票数 0
回答已采纳
1回答
我的jquery脚本只在Firefox中工作，为什么？
javascript、jquery、json、cross-browser
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="div1">dv1</div>
<div id=&
浏览 4提问于2014-02-25得票数 0
回答已采纳
2回答
执行异步false后无法从ajax函数传递数据
jquery、ajax、rest、ag-grid
我创建了一个rest服务，现在我尝试用数据创建一个gui。现在，我的index.html看起来是这样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript&#
浏览 3提问于2016-10-27得票数 1
回答已采纳
2回答
Ajax检查检查结果
javascript、php、jquery、ajax
我是javascript的新手，但我真的需要编写一些ajax特性。我有一个带有考试组件的Joomla网站。用户可以加载检查，如下所示：
<fieldset id="question1">
<div class="js-marker">
<div class="pull-right bu_marker_wrapper">
<label data-original-title="Если вы хотите вернуться к вопросу позже, поставьт
浏览 0提问于2015-08-14得票数 0
2回答
如何在highcharts中用json文件数据绘制图表
highcharts
我的json.data文件和我的index.html文件在同一个目录中。data.json文件如下所示：
{
data:
[
[1369540800000,20]
]
}
当我这样做的时候：
alert(JSON.stringify(jsonData, null, 4));
我得到了这个，所以我得到了值。还是不知道出了什么问题。
{
"data":[
[
1369540800000,
10
],
[
1369541700000,
浏览 0提问于2013-06-07得票数 0
回答已采纳
2回答
外部JSON和外部模板-无法同时工作
javascript、jquery、json
我刚刚开始关注Handlebars.JS，我可以看到它是一个非常强大的工具。
我希望能够使用外部加载的模板和外部加载的JSON来保持代码整洁，减少页面间的重复。
在我只能获得一个或另一个工作的时刻，我可以用本地JSON数据加载外部模板，或者用本地模板加载外部JSON文件。但是，我想两者都做！
我在工具栏文档中看不到任何涉及外部JSON或外部模板的内容。
这是我目前最接近的.
我的javascript。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf
浏览 1提问于2015-10-09得票数 1
回答已采纳
3回答
为什么两个不同服务器之间的ajax不能工作？
php、jquery、ajax
也许我做错了什么，但是在您的服务器/本地上尝试这个示例，如果我在本地有ajax.php文件并在本地运行请求，它可以工作，但是一旦ajax.php是远程的，它就不能工作。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js
浏览 1提问于2011-05-08得票数 1
回答已采纳
1回答
ajax返回当前页的html代码，而不是json。
javascript、jquery、json
我在JQuery中使用JQuery函数从文件中获取JSON。HTML、JavaScript和json文件位于同一个目录中。问题是，当我打印成功回调函数返回的数据时，它会打印HTML页面的HTML标记，而不是JSON。
以下是我的data.json文件内容：
{
"products":[
{
"skuNum":"SKU# 105423-2",
"brand":"nike running shoes",
"section":"men > sh
浏览 0提问于2018-09-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
