扣丁学堂前端在html页面之间传递参数几种方法

2018-07-13 14:49:14 428浏览

　一般点击项目列表中的某一项，然后会跳转至详情页面。详情是根据所点击的某条记录生成的，但是案例以及详情页面都是由用户在后期自行添加上去的，因此在跳转页面时，我们需要传递一个参数过去，这样才能通过这个参数进行数据请求，然后根据后台返回的数据来生成页面。今天扣丁学堂HTML5开发小编分享给大家如何让前端在html页面之间传递参数，正在学习这块内容的同学们赶紧看过来吧。

1、通过form表单传递参数

<htmllang="en">

<head>

<!--网站编码格式，UTF-8国际编码，GBK或gb2312中文编码-->

<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>

<metaname="Keywords"content="关键词一，关键词二">

<metaname="Description"content="网站描述内容">

<metaname="Author"content="YvetteLau">

<title>Document</title>

<!--cssjs文件的引入-->

<!--<linkrel="shortcuticon"href="images/favicon.ico">-->

<linkrel="stylesheet"href=""/>

<scripttype="text/javascript"src="jquery-1.11.2.min.js"></script>

</head>

<body>

<formname="frm"method="get"action="receive.html"onsubmit="returnfoo()"style="position:relative;">

<inputtype="hidden"name="hid"value=""index="lemon">

<imgclass="more"src="main_jpg10.png"/>

<inputtype="submit"style="position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>

</form>

<formname="frm"method="get"action="receive.html"onsubmit="returnfoo()"style="position:relative;">

<inputtype="hidden"name="hid"value=""index="aaa">

<imgclass="more"src="main_jpg10.png"/>

<inputtype="submit"style="position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>

</form>

<formname="frm"method="get"action="receive.html"onsubmit="returnfoo()"style="position:relative;">

<inputtype="hidden"name="hid"value=""index="bbb">

<imgclass="more"src="main_jpg10.png"/>

<inputtype="submit"style="position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>

</form>

</body>

</html>

<script>

functionfoo(){

varfrm=window.event.srcElement;

frm.hid.value=$(frm.hid).attr("index");

returntrue;

}

</script>

点击图片时，跳转至receive.html页面。页面的url变成：

我们想要传的字符串已经传递了过来。

然后再对当前的url进行字符串分割

window.location.href.split(“=”)[1]//得到lemon

我们拿到需要传来的参数之后，就可以根据这个进行下一步的处理了。

除了上述通过字符串分割来获取url传递的参数外，我们还可以通过正则匹配和window.location.search方法来获取。

2、通过window.location.href

譬如我们点击某个列表，需要传递一个字符串到detail.html页面，然后detail.html页面根据传来的值，通过ajax交互数据，加载页面的内容。

varindex="lemon";varurl="receive.html?index="+index;$("#more").click(function(){window.location.href=url;});

当前页面会被替换成recieve.html的页面，页面的url变为：

然后我们再用上面的方法提取自己需要的参数

以上就是扣丁学堂HTML5在线学习小编为大家分享的如何让前端在HTML页面之间传递参数方法，希望对HTML学习感兴趣的同学们有所帮助，想要了解更多内容的小伙伴可以关注我们的官方微信公众号或者直接登录扣丁学堂官网咨询。扣丁学堂有更多最新的学习资讯以及大量精品学习教程视频可供大家免费参考观看，想要成为HTML5开发topone的小伙伴们现在就开始行动吧。扣丁学堂H5技术交流群：559883758。

关注微信公众号获取更多学习资料

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>

标签: HTML5在线视频 HTML5教学视频 HTML5教学培训视频

上一篇扣丁学堂HTML5视频教程之HTML5添加禁止缩放功能实例下一篇扣丁学堂HTML5培训之微信小程序排坑指南详解

扣丁学堂前端在html页面之间传递参数几种方法

热门专区

课程推荐