如何仅在单击相应的语言按钮时加载json文件？
在前端开发中，可以通过以下步骤实现在单击相应的语言按钮时加载JSON文件：
- 创建一个HTML页面，包含相应的语言按钮和一个用于显示JSON数据的区域。
- 使用JavaScript编写事件处理程序，监听语言按钮的点击事件。
- 在事件处理程序中，根据点击的语言按钮确定要加载的JSON文件的路径。
- 使用XMLHttpRequest对象或fetch API发送HTTP请求，获取JSON文件的内容。
- 在请求成功后，解析JSON数据并将其显示在页面上的指定区域。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>加载JSON文件示例</title>
</head>
<body>
<button id="englishBtn">English</button>
<button id="chineseBtn">中文</button>
<div id="jsonData"></div>
<script>
// 获取按钮和数据区域的引用
var englishBtn = document.getElementById('englishBtn');
var chineseBtn = document.getElementById('chineseBtn');
var jsonDataDiv = document.getElementById('jsonData');
// 定义点击事件处理程序
function loadJSON(language) {
// 根据语言确定要加载的JSON文件路径
var jsonPath = '';
if (language === 'english') {
jsonPath = 'english.json';
} else if (language === 'chinese') {
jsonPath = 'chinese.json';
}
// 发送HTTP请求获取JSON文件内容
var xhr = new XMLHttpRequest();
xhr.open('GET', jsonPath, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析JSON数据并显示在页面上
var jsonData = JSON.parse(xhr.responseText);
jsonDataDiv.innerHTML = JSON.stringify(jsonData);
}
};
xhr.send();
}
// 绑定点击事件
englishBtn.addEventListener('click', function() {
loadJSON('english');
});
chineseBtn.addEventListener('click', function() {
loadJSON('chinese');
});
</script>
</body>
</html>在上述示例中，我们创建了两个按钮（英文和中文），以及一个用于显示JSON数据的<div>元素。通过点击按钮，调用loadJSON()函数来加载相应的JSON文件。根据语言按钮的点击事件，确定要加载的JSON文件路径，并使用XMLHttpRequest对象发送GET请求获取JSON文件的内容。请求成功后，解析JSON数据并将其显示在页面上。
请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和处理方式。另外，具体的JSON文件内容和路径需要根据实际情况进行定义和设置。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
相关·内容
1回答
成功后如何停止ajax获取url
javascript、jquery、ajax
我有一个模式来显示一个表单，和两个按钮：‘新建’和‘编辑’
“新建”按钮：
<button class="btn btn-default" data-toggle="modal" data-target="#POPProduct">NEW</button>
“编辑”按钮：
<a class="btn btn-xs btn-primary edit-product" href="http://domain.com/product/#POPProduct" data-id="104
浏览 0提问于2016-05-21得票数 1
2回答
将数据从JSON文件加载到html/控制台
json、xmlhttprequest
在这个html文件的body标记中，我有一个按钮，点击它会将colors.json的内容输入控制台。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script type="primary" src="colors.json"></script>
<script type="text/javascri
浏览 3提问于2018-05-24得票数 0
1回答
发送请求-以json格式发送数据
javascript、node.js、json
我有个学习项目。有一个简单的表单输入和按钮。需要将输入值保存到JSON文件中。HTML
<form action="/" method="post" id="emailForm">
<input type="email" id="email" name="email" placeholder="Enter email for newsletter">
<button type="submit" id="subscr
浏览 1提问于2019-02-25得票数 0
1回答
读/写本地json文件swift 4
json、swift、swift4
请帮帮我!我在项目的json文件中添加了一个json文件：
{
"person": [
{
"title": "Витамин А",
"image": "Vitamin1",
"favorite": false
},
{
"title": "Витамин B6",
"image": "Vitamin2",
"favorite&
浏览 2提问于2018-12-06得票数 3
1回答
连续的Ajax调用交换了数据
javascript、jquery、json、ajax
我有以下情况。
我使用以下方法进行ajax调用以加载json数据。
// Generic loadJSON
function loadJSON(method, url, callback)
{
$.ajax({
type: method,
url: url,
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: fu
浏览 0提问于2015-11-25得票数 1
1回答
将json对象数据传递到php文件
php、json、object
我有很少的编码经验(Bigtimenoob)，但最近购买了一些代码，我需要编辑。
我希望将结果发送到PHP文件，这样我就可以记录。我想将结果发送到wheelresults.php，我的设置如下：
<html>
<body>
<?php
$file = fopen("wheeldata.txt","a");
fclose($file);
?>
</body>
</html>
但是如何将信息从对象获取到这个文件呢？
// Usage
// load your JSON
浏览 0提问于2019-11-26得票数 0
2回答
在python中未使用jquery加载json数据
jquery、python、django、json、parsing
jquery加载得很好，但是json数据没有加载。我也没有得到任何错误。
脚本是
$("#loadjson").click(function(){
$.getJSON('filename.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$
浏览 1提问于2013-04-08得票数 2
回答已采纳
1回答
用json实现Owl carousel动态数据绑定
jquery、json、owl-carousel
我想将我的数据绑定到owl carousel。我可以用json数据路径绑定它。如下所示：
$("#owl-demo").owlCarousel({
jsonPath: 'json/customData.json',
jsonSuccess: customDataSuccess});
function customDataSuccess(data) {
var content = "";
for (var i in data["items"]) {
var img = data[
浏览 8提问于2015-07-13得票数 2
2回答
JSON数据自定义CSS (JSON数据来自外部JSON文件)*更新问题(如何从JSON数据生成数组)
javascript、jquery、html、css、json
我在将JSON数据解析成JavaScript时遇到了困难。我希望能够通过使用JSON来自定义CSS特性。例如，我只想构建一个基本的按钮。我创建了CSS样式并将其链接到HTML中。然而，我不知道这样一种方法来确保当Javascript读取JSON数据时，它会提供正确的答案。由于CSS涉及到数值(etc宽度:50%)，这让我更难定制。
我想要更改按钮、background-color、padding的大小以及按钮中的文本。
有人能帮我这个忙吗。谢谢你，我用这段代码把Json解析成html。
var info=JSON.parse(request.responseText);
--JSON文件
浏览 1提问于2017-07-21得票数 0
1回答
vscode webview -将巨大的json数据从webview传递到外部js。
javascript、json、visual-studio-code、webview、security-policy
我编写vscode扩展并使用webview来显示文本。文本存储在json文件中--这是一个巨大的文件，并且有很多文本。当鼠标在网页上悬停时，文本中的一些单词需要弹出窗口。单词和弹出信息存储在json中。例如：
{
wordA:{
popupText: "text"
//... and other properties
},
wordA:{
popupText: "another text"
//... and other properties
}
// ...
浏览 1提问于2021-09-14得票数 0
回答已采纳
3回答
使用基于jQuery和JSON的方法建立多语言网站
javascript、jquery、json、multilingual
我正在尝试为一个网站实现多语言。我更喜欢使用客户端脚本来改变English和Traditional Chinese之间的语言。
例如，：
创建一个客户端脚本以获取/设置所选语言：
$(document).ready(function() {
// The default language is English
var lang = "en-gb";
$(".lang").each(function(index, element) {
$(this).text(arrLang[lang][$(this).attr("key")]
浏览 0提问于2018-01-07得票数 6
回答已采纳
1回答
使用JSON的AJAX
json
该按钮本应在div中显示名称下的brett和国家下的澳大利亚，并在单击时显示相同的名称，但我无法使其工作。下面是代码:带脚本的html：
<html>
<head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script type="APPLICATION/javascript">
function loadJSON(){ var data_file = "data.json&
浏览 0提问于2015-04-15得票数 0
2回答
为什么这是跨域请求？
javascript、cross-domain
我正在尝试制作一组文件，以便能够发送给某个人，他们可以在本地的web浏览器中查看一些内容。我的代码在使用web服务器(Apache)查看时工作，但是如果我将它作为文件加载(即file:///C:/Code/Web/test/index.html)，它在加载JSON文件时会从我的JavaScript文件中得到一个跨域请求错误)。HTML、JS和JSON文件都位于同一个文件夹中。我不确定这是如何跨域请求，以及为什么chrome和IE在加载JSON文件时失败。Firefox没有问题地加载它。
我用于加载文件的JS是：
const JSON_FILE = "tin.json";
var
浏览 15提问于2015-04-07得票数 0
回答已采纳
1回答
动态创建与JSON文件中的密钥对应的链接，单击时提取与该键相关的数据
javascript、html、json
好吧，这是个冗长的标题。希望这有意义。让我试着澄清：
假设我有这样的JSON文件：
{
"Bob Smith": {
"born": "Decemeber 1, 1980",
"died": null,
"spouse": "Mary Smith",
"parents": {
"mother": "Jane Smith",
"father": "Bill Smith&#
浏览 0提问于2017-01-17得票数 1
3回答
json检索失败，返回jquery .each
javascript、jquery、json
{"paging":
{"pageNum":2,
"action":"Next",
"type":"",
"availableCacheName":"getAllFunds",
"selectedCacheName":"",
"showFrom":101,
"showTo":200,
"totalRec":289
浏览 6提问于2010-12-28得票数 0
3回答
在jquery更新之后，Div内容将清除。
javascript、jquery、html
我目前正在jquery中生成一些HTML。数据来自一个JSON文件。
下面是我创建上述HTML的代码：
$(document).ready(function () {
$('#searchForm').submit(function () {
var entry= $("#searchForm").val();
$.ajax({
type: 'POST',
url: '@Url.Action("myMe
浏览 3提问于2015-04-06得票数 0
回答已采纳
1回答
AJAX调用的空白输出
c#、jquery、asp.net、sql-server、ajax
我正在尝试从SQL server读取数据，并使用WebMethod在之后在网页上显示数据。我正在使用我自己的数据和逻辑。
目标-显示基于ProductName的事件计数时，点击按钮。
WebService.cs
public class Incidents
{
public string incidentProductName;
public string incidentCount;
public string incidentProductSearch;
}
[WebMethod]
public List&
浏览 4提问于2016-07-12得票数 2
1回答
Ajax返回多个输出？
javascript、json、ajax、object、xmlhttprequest
我只想从product.json文件中获取数据。其中存储了两个对象
(1)闭路电视相机产品对象2.(2)笔记本电脑产品对象.
我想得到的数据笔记本电脑产品时，特定的按钮点击和相同的中央电视台。
，但问题是AJAX同时返回两个对象，我还应用了条件.i，只想一次得到一个对象
//for fetching CCtv camera products
const fetchdata = document.
浏览 3提问于2020-07-21得票数 1
回答已采纳
1回答
run方法中的角$q服务实现
javascript、angularjs
我有一个示例，它通过全局loadJSON函数从本地文件中加载一些数据(不是必需的，而是可取的)。
之后，在加载所有文档的数据并打印'i ve loaded'字符串时，我会等待。
问题是，我开始使用'x‘服务的数据比我设法从文件完全上传到内存的时间要早。
如何等待数据被加载，然后再继续呈现页面并执行所有操作？
我需要为此使用$q，但我该如何做呢？
function loadJSON(file, callback) {
var doc = new XMLHttpRequest();
doc.overrideMimeType("application/json
浏览 6提问于2014-11-07得票数 0
回答已采纳
4回答
Popover单击事件不起作用
javascript、jquery、twitter-bootstrap
$('.pop').each(function () {
var $elem = $(this);
$elem.popover({
placement: 'auto',
trigger: 'hover',
html: true,
container: $elem,
animation: true,
content: function () {
var pop_dest = $(this).attr("da
浏览 1提问于2015-11-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
