我所在的项目组总共有四种测试服务器加一个生产服务器：
My：个人开发用的本地服务器
team：本地项目组共享的测试服务器
DEV：远程开发测试服务器
SIT：系统集成测试服务器
Production：生产服务器
这四种都部署相同的应用，每一种服务器都需要用至少有5个URL去访问，这样我就需要在收藏夹里或者文本文件里添加25个地址。很烦难！
后来，我想了一个主意：做一个页面，放上5个不用应用的URL,再加上一个环境类型选择的下拉选择框。
<html>
<head>
<style>
td.left-nav-overview{ background:#98b1c4; }
a.left-nav-overview:link,
a.left-nav-overview:visited{ text-decoration:none; color:#fff; }
a.left-nav-overview:hover{ text-decoration:underline; color:#fff; }
td.left-nav{ background-color:#c8d7e3; vertical-align:top; }
a.left-nav:link,
a.left-nav:visited{ text-decoration:none; color:#293d6b; }
a.left-nav:hover{ text-decoration:underline; color:#293d6b; }
tr.left-nav-last{ background-color:#c8d7e3; vertical-align:top; }
</style>
<title>地址变换小工具</title>
<script language="JavaScript" type="Text/JavaScript">//<!--
var currentType="localhost";
function changeURL(selectBox){
var tempType=currentType;
currentType=selectBox.value;
var alllinks=document.links;
for(var i=0;i<alllinks.length;i++){
alllinks[i].href=alllinks[i].href.replace(tempType,currentType);
}
}
//--></script>
</head>
<body>
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">
<td width="150">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td> </td>
</tr>
</table>
<table border="0" cellpadding="1" cellspacing="1" width="150">
<tr>
<td class="left-nav-overview"><a class="left-nav-overview" href="#">Home</a></td>
</tr>
<tr>
<td class="left-nav">
<a class="left-nav" href="//localhost/url_1">link_1</a>
</td>
</tr>
<tr>
<td class="left-nav">
<a class="left-nav" href="//localhost/url_2">link_2</a></td>
</tr>
<tr>
<td class="left-nav">
<a class="left-nav" href="//localhost/url_3">link_3</a></td>
</tr>
<tr>
<td class="left-nav">
<a class="left-nav" href="//localhost/url_4">link_4</a>
</td>
</tr>
<tr>
<td class="left-nav">
<a class="left-nav" href="//localhost/url_5">link_5</a>
</td>
</tr>
<tr class="left-nav-last">
<td> </td>
</tr>
</table>
<br>
<select onchange="javascript:changeURL(this)">
<option value="localhost">My</option>
<option value="teamhost">Team</option>
<option value="devhost">DEV</option>
<option value="sithost">SIT</option>
<option value="prohost">Pro</option>
</select>
</td>
<td width="10"> </td>
<td width="600">
<h1>地址变换小工具</h1>
<img src="" width="600" height="300">
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
例如，可以定义两个函数，分别在点击不同的按钮时更改`form.action`为对应的处理页面地址，再调用`submit()`方法来提交表单。示例代码如下： ```html function query() { form.action = "query.php"; form....
用户只需下载安装，然后输入网站地址，工具就会自动开始工作，扫描整个网站的链接，找出其中的坏链，并给出详细的报告。同时，工具还会生成网站地图，用户可以直接将生成的文件上传到网站的根目录，并通过搜索引擎的...
URL重写适用于简单的GET请求传值，表单提交适用于POST请求传值，而使用JavaScript动态修改URL则适用于需要在页面内部动态改变链接地址的情况。在实际开发中，应根据具体需求选择合适的传值方式，以提高程序的可维护...
下载无需扣分，具有一定收藏价值，特此奉献！ 目录如下。 javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的...
此外，JavaScript还可以处理表单提交事件，例如使用AJAX进行异步提交，避免页面刷新。 4. **PHP后端处理**：当用户点击登录按钮时，表单数据会被发送到服务器端的PHP脚本。PHP负责接收这些数据，验证用户名和密码...
在在线答题考试页面中，锚点可以帮助用户快速定位到他们想要查看的题目，而无需滚动整个页面。 在这个项目中，jQuery被用来实现锚点的平滑滚动效果。这通常是通过监听用户的点击事件，然后使用`animate()`函数平滑...
1. 表单验证：在用户提交表单之前，JavaScript可以检查输入的用户名和密码是否符合特定规则，如长度限制、格式要求等，提供实时反馈，无需等待服务器响应。 2. 动态效果：利用JavaScript库或框架（如jQuery），可以...
这些控件库提供了丰富的UI组件和函数，使得开发者可以通过简单的API调用就能实现复杂的交互效果，如异步数据加载、无刷新表单提交、时间选择器、弹出对话框等。 "将页面以层的方式进行打开"是一种常见的前端交互...
- 通过AJAX（异步JavaScript和XML）技术实现留言提交，使页面在提交留言后无需刷新，提高交互性。 2. **功能实现**： - 页面结构：HTML文档中包含了头部信息，如字符集设置、CSS样式表链接、视口设置以及...
- Pjax不适用于所有页面，如涉及到表单提交或页面内有JavaScript依赖的元素时，可能需要特殊处理。 - 考虑到浏览器兼容性，需要为不支持Pjax的浏览器提供备选方案。 - 需要正确处理页面元信息，如`<title>`和`<meta>...
2. 调整样式：通过修改CSS文件，改变颜色、字体、间距等，使页面符合品牌形象。 3. 添加或删除元素：根据需要，增删页面的各个部分，如广告位、侧边栏等。 4. 优化响应式：确保在不同屏幕尺寸下，页面仍能良好显示...
JavaScript函数则可以实现更复杂的交互逻辑，比如异步请求（AJAX）以更新页面部分内容，而无需刷新整个页面。 理解这些调用方式对于开发Web应用程序至关重要，因为它们是客户端和服务器之间通信的基础。同时，现代...
这种技术通过XMLHttpRequest对象实现，它可以在后台发送HTTP请求，并接收服务器响应，然后更新DOM（文档对象模型）以改变页面内容。在用户登录验证场景中，AJAX可以提供即时反馈，例如，当用户输入错误的用户名或...
在jQuery Mobile框架中，页面跳转和加载外部页面是移动Web开发中的核心功能，它使得用户可以在应用中平滑地导航。`changePage()`方法是jQuery Mobile提供的主要接口，用于在多个页面间进行平滑的过渡。这个方法的...
- **表单提交**：用户填写表单后，AJAX可即时验证输入，无需提交就能反馈错误信息，提高了用户体验。 - **实时搜索**：用户在搜索框中输入关键词时，页面可以实时展示匹配结果，无需用户点击搜索按钮。 - **数据加载...
添加该事件处理，就能在页面postback提交之前，重置页面的地址。 为前面的页面添加onsubmit之后，我们发现，postback不再会改变地址栏地址显示了。 注意：你确认试过点击最后一组链接中的buildin default page和...
5. **导航和页面链接**：通过 `data-url` 属性和 `data-rel` 属性，jq.mobile 实现了在页面间平滑的导航，同时支持历史记录和前进/后退按钮。 ### 二、快速开发 WebAPP 使用 jq.mobile 模板，开发者可以快速搭建起...
一种解决方案是在页面上提供“链接到此页面”的选项，或者通过URL链接中添加无效的标记来实现。 综上所述，AJAX在多种应用场景中都能提供显著的优势，但同时也需要注意其适用范围和潜在的问题。合理利用AJAX技术，...
这使得用户在提交表单时，无需等待整个页面刷新，而是仅更新必要的部分。 7. **服务器端处理**：当用户提交表单后，数据通常通过HTTP请求发送到服务器进行处理。这涉及后端语言（如PHP、Node.js或Python）和数据库...
这个框架的强大之处在于其可自适应的设计，使得开发者无需编写特定于平台的代码就能构建跨平台的移动应用程序。 **1. jQuery Mobile 的核心特性** - **触控优化**: jQuery Mobile 通过监听触摸事件，为移动设备...