用bootstrap4和jq写一个自动判断当前环境
时间: 2024-02-17 13:02:50 浏览: 76
备份一个bootstrap.js、bootstrap.css和jquery.js
好的,我可以帮你写一个简单的示例代码。首先需要引入Bootstrap 4和jQuery的CDN链接,如下所示:
```html
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
```
接下来,我们可以使用jQuery编写一个函数来自动判断当前环境,并返回对应的接口地址,代码如下所示:
```javascript
function getApiUrl() {
var apiUrl;
if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
apiUrl = '/api/development'; // 如果当前域名是localhost或者127.0.0.1,则是开发环境
} else {
apiUrl = '/api/production'; // 否则是生产环境
}
return apiUrl;
}
```
在上面的代码中,我们使用`location.hostname`来获取当前域名,如果当前域名是localhost或者127.0.0.1,则认为当前环境是开发环境,否则认为是生产环境。根据当前环境返回对应的接口地址。
如果你想在页面加载时自动请求对应的接口,并将请求结果显示在页面上,可以在页面中添加一个按钮和一个显示请求结果的元素,代码如下所示:
```html
<button id="btn-request" class="btn btn-primary">请求接口</button>
<div id="result"></div>
```
```javascript
$(function() {
$('#btn-request').click(function() {
var apiUrl = getApiUrl(); // 获取当前环境对应的接口地址
$.ajax({
url: apiUrl,
type: 'GET',
success: function(response) {
$('#result').text(JSON.stringify(response)); // 将请求结果显示在页面上
},
error: function(error) {
$('#result').text('请求接口失败:' + error.statusText); // 将错误信息显示在页面上
}
});
});
});
```
在上面的代码中,我们在按钮被点击时调用`getApiUrl()`函数来获取当前环境对应的接口地址,并使用`$.ajax()`方法发送GET请求,并根据请求结果将其显示在页面上。
希望这个简单的示例代码可以帮到你,如果有其他问题,欢迎继续提问。
阅读全文