关注我
下面给大家介绍一下如何通过URL来取得传递过来的值作为给HTML的文本框的值。
如：index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&......
静态html文件js读取url参数 根据获取html的参数值控制html页面输出
一、字符串分割分析法。
这里是一个获取URL带QUESTRING参数的JAVAS
函数:
<Script language="javascript">
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
</Script>然后我们通过调用此函数获取对应参数值：
<Script language="javascript"> var Request = new Object(); Request = GetRequest(); var 参数1, 参数2, 参数3, 参数N; 参数1 = Request['参数1']; 参数2 = Request['参数2']; 参数3 = Request['参数3']; 参数N = Request['参数N']; </Script>
以此获取url串中所带的同名参数。
举例说明如下：
获取链接地址：http://127.0.0.1/EditEmail.aspx?UserID=10010&OldEmail=abc@sohu.com的传递过来的用户ID和邮箱名称添加到HTML标签里面。
页面的HTML的代码如下：
<div class="item"> <span class="label">用户ID：</span> <input id="UserID" class="grid_12 textBox" maxlength="50" name="UserID" /> </div> <div class="item"> <span class="label">邮箱：</span> <input id="OldEmail" class="grid_12 textBox" maxlength="50" name="OldEmail" /> </div>
<script type="text/javascript" language="javascript">
function loadUserIDAndEmail() {//通过URL的参数获取传过来的值
var url = document.URL;
var para = "";
if (url.lastIndexOf("?") > 0) {
para = url.substring(url.lastIndexOf("?") + 1, url.length);
var arr = para.split("&");
document.getElementById("UserID").value = arr[0].split("=")[1];
document.getElementById("OldEmail").value = arr[1].split("=")[1];
/*
para = "";
for (var i = 0; i < arr.length; i++) {
para += "第" + (i + 1) + "个参数>>名:" + arr[i].split("=")[0];
para += " 值:" + arr[i].split("=")[1] + "<br>";
}
document.write(para);
*/
}
}
window.load = loadUserIDAndEmail();
</script>
还有另外一种做法，HTML页面通过C#语言获取服务器解析出传送来的参数值，即HMTL页面调用C#的函数方案。代码如下：
<div class="item"> <span class="label">会员ID：</span> <input id="UserID" class="grid_12 textBox" maxlength="50" name="UserID" value="<%= userID %>" /> <span id="UserID_validationMessage"></span> </div> <div class="item"> <span class="label">原邮箱：</span> <input id="OldEmail" class="grid_12 textBox" maxlength="50" name="OldEmail" value="<%= email %>" /> <span id="OldEmail_validationMessage"></span> </div>
C#的代码如下：
public partial class client_UpdateEmail : System.Web.UI.Page
{
/* 以下的作法也可以实现，在页面获取C#服务器端的值*/
public string userID = string.Empty;
public string email = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if ((null != Request.QueryString["userID"]) || (null != Request.QueryString["email"]))
{
userID = Request.QueryString["userID"].ToString().Trim();
email = Request.QueryString["email"].ToString().Trim();
}
}
}
}
二、正则分析法。
JS函数如下：
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
} else {
return null;
}
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
三 获取URl
<script type="text/javascript">
var thisURL = document.URL;
thisURL = thisURL.toLowerCase();
if (thisURL.indexOf("a21b08") >= 0) {
var a = $(".tabbutton&.right");
a.hide();
}
if (thisURL.indexOf("a21b04") >= 0) {
var b = $("div[class='tabbutton right']");
b.hide();
}
</script>
好了，今天就介绍到这里。