搜索
您的当前位置:首页正文

HTML网页间利用JavaScript通过URL传递变量

2023-12-01 来源:欧尚宠物网

PHP代码:

<SCRIPT language=javascript>/* html_list.js HTML 网页 间利用 JavaScript 通过 URL 传递变量*实例为根据所传递参数自动读取图片,让静态网页实现单页面显示不同内容及分野功能*以下为 参数分析* imgMax //图片的总个数* imgName //起始图片的文件名,所有图片都为jpg图片,传递参数时,只传文件名,例:101* //图片的读取方式为 +1 ,所以,应该注意 01+1=2 ,而不等于 02* imgUrl //图片的路径* pageMax //单页最大显示图片数*/function showImg(imgMax,imgName,imgUrl,pageMax) { imgName = eval(imgName); pageMax = eval(pageMax); imgMax = eval(imgMax); var pageUrl=""; pageUrl = window.location; pageUrl = pageUrl.toString() //获取当前页的URL,并附给字符串 pageUrl var Parameter = pageUrl.split("?"); //以 ? 为分隔符,将上面获得的 URL 拆分成数组 Url = Parameter[0]+"?page"; //取得去掉参数后的URL,备后面翻页使用 Parameter = Parameter[1]; //取得 ? 的后一部分 var Parameter = pageUrl.split("="); //在次以 = 拆分 Parameter = Parameter[1]; //取得参数 if(Parameter<=0||Parameter==""||isNaN(Parameter)) { Para=1; } else { Para=Parameter; } //如果参数未设置或错误设置,则自动为1,否则为设置数 img = new Array(); //设置图片组变量 for(i=0;i<imgMax;i++){ img[i] = imgName+i; } //给组中的每一个变量附值 start = (Para - 1)*pageMax; //每页中开始的图片名称 end = ((start+pageMax)>=img.length)?img.length<img src="images/smilies/frown.gif" border="0" alt="">start+pageMax); //结束的图片名称 document.write("<table border=0 width=100% align=center>") //制表 for(i=start;i<end;i++) { document.write ("<tr align=center><td><img src="+imgUrl+""+img[i]+".jpg><br></td></tr>"); } //
输出相应图片 document.write ("<tr align=center><td>") //制表 if(start!=0) { pre = Url+"="+eval(Para-1); document.write("<a href="http://www.php1.cn/">+pre+">上一页</a>"); } else { document.write("上一页"); } document.write("        ") if(end<img.length) { Para = eval(Para)+1; next = Url+"="+Para; document.write("<a href="http://www.php1.cn/">+next+">下一页</a>"); } else { document.write("下一页"); } //分析上下页连接 document.write("</td></tr></table>"); //制表 } imgMax="5"; imgName="101"; imgUrl="./"; pageMax="2"; showImg(imgMax,imgName,imgUrl,pageMax);</SCRIPT>

小编还为您整理了以下内容,可能对您也有帮助:

两个HTML页面如何传递数据?

一.通过表单简单的传输数据,利用js代码接收传递的数据,注意method属性要设为get。
<form id="form" action="data.html" method="get"></form>//action的值是你的目的html
在你的目的html中可通过url接收传递的数据,并将数据保存在一个对象中。
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var url = window.location.search;//location.search是从当前URL的?号开始的字符串
console.log(url);
var Request = new Object();
if (url.indexOf('?') != -1) {
var a = '';
var str = url.substr(1)  //去掉?号
strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
a = strs[i].split('=')[0];
Request[a] = decodeURI(strs[i].split('=')[1]);//解码,生成获取信息的对象
console.log(Request[a]);
}
}
console.log(Request);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
注意这种方式传递中文数据需要用decodeURIComponent()或decodeURL()函数解码,unescape()现在似乎已经淘汰了。
然后利用document.write()或innerHTML等方法或函数将数据显示在网页上。此种方法适合自己平时写JS的小练习,此种方法无法将数据保存下来。

2.使用Cookie传递参数
下面是简单的实例,a页面保存Cookie,b页面读取。
a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a</title>
<script type="text/javascript">
/***
* @param {string} cookieName Cookie名称
* @param {string} cookieValue Cookie值
*/
function SetCookie(cookieName,cookieValue) {
/*设置Cookie值*/
document.cookie = cookieName + "=" + escape(cookieValue)
}
function login() {
var username = $("user").value;
if(username.length>0 && username) {
SetCookie("username", username);
/*跳转到b.html页面*/
document.location = "b.html";
}
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="main">
<div><span>请输入你的名字</span><input type="text" id="user" /></div>
<div>
<input type="button" onclick="login()" value="提交" />
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
b.html

<html>
<head>
<meta charset="UTF-8">
<title>b</title>
<script type="text/javascript">
/***
*读取指定的Cookie值
*@param {string} cookieName Cookie名称
*/

function ReadCookie(cookie_name){
//判断是否存在cookie
if (document.cookie.length > 0){
//查询cookie开始部分
cookie_start = document.cookie.indexOf(cookie_name + "=")
//如果存在
if (cookie_start != -1){
//计算结束部分
cookie_start = cookie_start + cookie_name.length + 1
cookie_end = document.cookie.indexOf(";", cookie_start)
//如果已经是最后一个cookie值,则取cookie长度
if (cookie_end == -1) {
cookie_end = document.cookie.length
}
//获取cookie值,unescape对特殊字符解密
return unescape(document.cookie.substring(cookie_start,cookie_end))
}
}
//其它情况返回空
return ""
}

function $(id) {
return document.getElementById(id);
}

function init() {
var username = ReadCookie("username");
if(username && username.length>0) {
$("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
} else {
$("msg").innerHTML = "<a href='a.htm'>请录入名字</a>";
}
}
</script>
</head>
<body onload="init()">
<div id="msg"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
此种方法也是适合自己平时写JS的小练习,此种方法无法将数据保存下来。

3.通过web服务器利用前后端交互
前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单,用户填写表单后提交给服务器,服务器收到表单后返回处理结果。其大致构成如下:
URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下:
例如利用nodejs与json文件相连接,实现对本地json数据的增删改查,在不同网页间传递数据。
————————————————
版权声明:本文为CSDN博主「想躺」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41209003/article/details/103739371

两个HTML页面如何传递数据?

一.通过表单简单的传输数据,利用js代码接收传递的数据,注意method属性要设为get。
<form id="form" action="data.html" method="get"></form>//action的值是你的目的html
在你的目的html中可通过url接收传递的数据,并将数据保存在一个对象中。
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var url = window.location.search;//location.search是从当前URL的?号开始的字符串
console.log(url);
var Request = new Object();
if (url.indexOf('?') != -1) {
var a = '';
var str = url.substr(1)  //去掉?号
strs = str.split('&');
for (var i = 0; i < strs.length; i++) {
a = strs[i].split('=')[0];
Request[a] = decodeURI(strs[i].split('=')[1]);//解码,生成获取信息的对象
console.log(Request[a]);
}
}
console.log(Request);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
注意这种方式传递中文数据需要用decodeURIComponent()或decodeURL()函数解码,unescape()现在似乎已经淘汰了。
然后利用document.write()或innerHTML等方法或函数将数据显示在网页上。此种方法适合自己平时写JS的小练习,此种方法无法将数据保存下来。

2.使用Cookie传递参数
下面是简单的实例,a页面保存Cookie,b页面读取。
a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a</title>
<script type="text/javascript">
/***
* @param {string} cookieName Cookie名称
* @param {string} cookieValue Cookie值
*/
function SetCookie(cookieName,cookieValue) {
/*设置Cookie值*/
document.cookie = cookieName + "=" + escape(cookieValue)
}
function login() {
var username = $("user").value;
if(username.length>0 && username) {
SetCookie("username", username);
/*跳转到b.html页面*/
document.location = "b.html";
}
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<div id="main">
<div><span>请输入你的名字</span><input type="text" id="user" /></div>
<div>
<input type="button" onclick="login()" value="提交" />
</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
b.html

<html>
<head>
<meta charset="UTF-8">
<title>b</title>
<script type="text/javascript">
/***
*读取指定的Cookie值
*@param {string} cookieName Cookie名称
*/

function ReadCookie(cookie_name){
//判断是否存在cookie
if (document.cookie.length > 0){
//查询cookie开始部分
cookie_start = document.cookie.indexOf(cookie_name + "=")
//如果存在
if (cookie_start != -1){
//计算结束部分
cookie_start = cookie_start + cookie_name.length + 1
cookie_end = document.cookie.indexOf(";", cookie_start)
//如果已经是最后一个cookie值,则取cookie长度
if (cookie_end == -1) {
cookie_end = document.cookie.length
}
//获取cookie值,unescape对特殊字符解密
return unescape(document.cookie.substring(cookie_start,cookie_end))
}
}
//其它情况返回空
return ""
}

function $(id) {
return document.getElementById(id);
}

function init() {
var username = ReadCookie("username");
if(username && username.length>0) {
$("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
} else {
$("msg").innerHTML = "<a href='a.htm'>请录入名字</a>";
}
}
</script>
</head>
<body onload="init()">
<div id="msg"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
此种方法也是适合自己平时写JS的小练习,此种方法无法将数据保存下来。

3.通过web服务器利用前后端交互
前后端交互又可分为表单交互和url参数交互。表单交互是指在HTML中创建一个表单,用户填写表单后提交给服务器,服务器收到表单后返回处理结果。其大致构成如下:
URL参数经常用于浏览器向服务器提交一些请求信息。其流程图大致如下:
例如利用nodejs与json文件相连接,实现对本地json数据的增删改查,在不同网页间传递数据。
————————————————
版权声明:本文为CSDN博主「想躺」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_41209003/article/details/103739371

js,url 地址栏可以传递变量么?

当然可以啊。

比如使用如下JS来进行跳转,并且动态的添加参数。

你可以复制script中的内容到浏览器控制台中看效果。

<script>

var key ="漫画";

window.location.href="https://www.baidu.com/s?wd="+key;

</script>

javascript中链接传递变量参数

分类: 电脑/网络 >> 程序设计 >> 其他编程语言

问题描述:

[url=./question/(]<script language="javascript">

function change()

{

var m=document.formchage;

a=m.select.value;

b=m.select2.value;

c=m.select3.value;

d=m.select4.value;

alert(a);

location.href=("jobcontent?select=<%=m.select.value%>&select2=<%=b%>&select3=<%=c%>&select4=<%d%>");

alert(m.select1.value);

alert(m.select2.value);

alert(m.select3.value);

return false;

}

</script>

我想要把a,b,c,d的值传递到链接的变量中该怎么写

解析:

[/url]修改后的程序:

<script language="javascript">

function change()

{

var m=document.formchage;

a=m.select.value;

b=m.select2.value;

c=m.select3.value;

d=m.select4.value;

location.href=("jobcontent?select="+a+"&select2="+b+"&select3="+c+"&select4="+d);

alert(m.select3.value);

return false;

}

</script>

欧尚宠物网还为您提供以下相关内容希望对您有帮助:

两个HTML页面如何传递数据?

在你的目的html中可通过url接收传递的数据,并将数据保存在一个对象中。&lt;script type="text/javascript" charset="utf-8"&gt; window.onload = function() { var url = window.location.search;//location.search是从当前UR...

javascript中链接传递变量参数

&lt;/script&gt; 我想要把a,b,c,d的值传递到链接的变量中该怎么写 解析:[/url]修改后的程序:&lt;script language="javascript"&gt; function change(){ var m=document.formchage;a=m.select.value;b=m.select2.value;c=m....

怎么用javascript实现两个HTML页面传值问题

window.opener.document.getElementById("textarea_content_id").innerHTML;

js,url 地址栏可以传递变量么?

当然可以啊。比如使用如下JS来进行跳转,并且动态的添加参数。你可以复制script中的内容到浏览器控制台中看效果。&lt;script&gt;var key ="漫画";window.location.href="https://www.baidu.com/s?wd="+key;&lt;/script&gt; ...

html中的js如何获取通过POST方法传递过来的参数

可以通过解析url路径,获取参数:\tfunctiongetURLParameter(name){ returndecodeURIComponent((newRegExp('[?|&amp;]'+name+'='+'([^&amp;;]+?)(&amp;|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g,'%...

用js传递HTML之间的参数

1、首先打开Eclipse。2、点击菜单栏File-&gt;New-&gt;Dynamic Web Project 。3、点击Next,进入下一步。4、点击Finish,完成项目创建。5、创建一个add.jsp 。6、在add.jsp添加一段脚本,用来计算两个数的和。7、使用jsp:...

怎么把js中通过url同时传多个参数怎么写

url传递多个参数,第一个参数使用?号进行连接,格式为key=value,后面参数用&amp;分隔\x0d\x0a最终格式如:url?key=value&amp;key=value\x0d\x0a举例:\x0d\x0aurl地址?a=2&amp;b=3 这里传递了2个参数a和b ...

html网页如何传递接收地址参数?

这个用js稍微处理一下就好了很简单 实现html页面的参数传递 方法一:下面是javascrīpt的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数。有了这个函数,就可以在页面之间传递参数了。/**函数功能:从...

javascript实现页面跳转功能,参数怎么传递?

2.传递url var list_url = $('#list_url').val();window.location.href='/document/order/view.php?order_id='+order_id+'&amp;action=edit&amp;handler=admin&amp;list_url='+list_url;3.解析url并跳转 var list_url = ...

js获取url参数给html

&lt;script type="text/javascript"&gt; function getpara()//获取参数的函数 { var url=document.URL;var para="";if(url.lastIndexOf("?")&gt;0){ para=url.substring(url.lastIndexOf("?")+1,url.length);var arr=...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top