HTML页面中元素动态获取外部文件中的数据

需求背景

 如上图，目前项目中前端右下角需要显示Version，Version对应的值为了部署的时候统一在文件中配置，要求Version对应的元素动态获取配置文件中的值；

实现方法

$(function (){
	$('#versionValue').load('/static/version');
});

相关语法介绍

这里采用了JQuery load()方法

实例

把文件“demo_test.txt”的内容加载到指定的<div>元素：

$("button").click(function(){
    $("#div1").load("demo_test.txt");
});

定义和用法

load()方法从服务器加载数据，并把返回的数据放置到指定的元素中。

注意：还存在一个名为load的jQuery事件方法。调用那个，取决于参数。本文中提到的是名为load()的jQuery AJAX方法。两者的方法名称相同，差别在调用参数。

语法

$(selector).load(url,data,function(response,status,xhr))

参数	描述
url	必需。规定您需要加载的URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定load()方法完成时运行的回调函数。额外的参数： response : 包含来自请求的结果数据 status : 包含请求的状态("success"、"notmodified"、“error”、"timeout"、"parsererror") xhr : 包含XMLHttpRequest对象