版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rth362147773/article/details/78819161
前言
因为最近在实现前后端分离,前端需要独立起站点服务,因此需要写入一些站点服务配置参数。但服务有开发,测试,线上各个站点服务配置参数不一样,而站点代码又是相同的。所以想把配置参数和代码做一个分离。把服务器的环境配置做成一个json文件,在渲染页面的时候读取一个环境配置文件,再渲染页面。因此这里我使用了get请求,请求本地一个JSON文件,来写入服务环境配置。
实现
1.我在项目根目录下,放入一个config.json文件,内容格式为JSON。用来存放服务站点信息。如:请求URL。
config.js
2.在index.html里面写入加载读取config.js文件代码,当读取到config.js文件后,我们输出config.js,里面的信息。
3.获取成功。你可以在getJSON,function中写入你想要执行的代码。
结论
这种写法方便引入,如果说用webpack或者gulp等构造工具,发到测试或线上再打包也可以,但运维人员不太懂前端打包。所以我仿java服务读取config.xml。运维人员一看就懂,改也会马上生效。
代码
附上js版本和jquery版本代码。
JS版本
<script type="text/javascript">
var xmlHttp;
function createxmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doGetJSON(url,fun) {
createxmlHttpRequest();
xmlHttp.open("GET", url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
fun&fun(JSON.parse(xmlHttp.responseText));
}
}
}
var configJSON = '/text/config.json?t='+new Date().getTime();
//编写url位置
doGetJSON(configJSON,function(data){
alert('success ulr='+data.url);
})
</script>
Jquery版本
<script type="text/javascript">
var configJSON = '/text/config.json?t='+new Date().getTime();
$.getJSON(configJSON, function(data){
alert('success ulr='+data.url);
});
</script>