详解前端在html页面之间传递参数的方法

2020-04-16 21:25:28易采站长站整理

项目中经常会出现的一种情况,有一个列表,譬如是案例列表,点击列表中的某一项,跳转至详情页面。详情是根据所点击的某条记录生成的,因为案例和具体的详情页面,都是用户后期自行添加的,我们开始编写时,不可能穷尽。因此跳转页面时,我们需要传递一个参数过去,这样我们才能通过这个参数进行数据请求,然后根据后台返回的数据来生成页面。因此,通过a标签跳转的方式,肯定是行不通的。
我们经常写form表单,提交时,可以传递参数,如果使用表单,并将其隐藏起来,应该可以达到效果。

除此以外,window.location.href和window.open也可以达到效果。

1、通过form表单传递参数


<html lang="en">
<head>
<!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一,关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<!--css js 文件的引入-->
<!-- <link rel="shortcut icon" href="images/favicon.ico"> -->
<link rel="stylesheet" href=""/>
<script type = "text/javascript" src = "jquery-1.11.2.min.js"></script>
</head>
<body>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "lemon">
<img class = "more" src = "main_jpg10.png" />
<input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
</form>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "aaa">
<img class = "more" src = "main_jpg10.png" />
<input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
</form>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "bbb">