要实现在不进行完整页面刷新的情况下获取外部JSON值的更新,可以使用Ajax技术。
以下是一个使用jQuery的示例代码:
HTML代码:
JavaScript代码:
// 页面加载完成后执行
$(document).ready(function() {
// 定义获取JSON数据的函数
function getJSONData() {
$.ajax({
url: 'data.json', // JSON数据文件的URL
dataType: 'json',
success: function(data) {
// 更新页面上的JSON值
$('#json-value').text(data.value);
},
error: function() {
console.log('无法获取JSON数据');
}
});
}
// 页面加载完成后立即获取一次JSON数据
getJSONData();
// 点击刷新按钮时获取最新的JSON数据
$('#refresh-btn').click(function() {
getJSONData();
});
});
在上面的示例中,HTML部分包含一个用于显示JSON值的 请注意,上述示例假设有一个名为 你可以根据实际情况修改示例代码中的URL和JSON数据格式。$.ajax()
函数来异步获取JSON数据,并在成功获取后更新页面上的JSON值。
data.json
的外部JSON数据文件,其格式如下:{
"value": "更新的JSON值"
}
相关内容