前端在html,jsp页面之间传递参数的方法

概念图

目标

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

项目中经常会出现的一种情况，有一个列表，比如商品列表，点击列表中的某一项商品，跳转至详情页面。跳转页面时，我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成详情页面。因此，通过a标签跳转的方式，肯定是行不通的。 

写form表单，提交可以传递参数，除此以外，window.location.href和window.open也可以达到效果。

原理

原理都是通过方法把键值对传到window.location.href里,要详情页就可以去window.location.href里拿数据

就是通过事件方法,在window.loaction.href里追加了参数字符串

参考博文:https://www.kancloud.cn/digest/yvettelau/137669

清单

1、通过form表单传递参数

 

第一个页面,在这个页面里传递参数给第二个页面

第二个页面,在这里面,接收第一个页面传递过来的参数

 

第一个页面在页面跳转的过程中,把参数传递到window.location.href,然后在第二个页面里打开浏览器控制台查看window.location.href,可以看到如下数据:

2、通过window.location.href

点击商品列表中的某一个商品，传递一个字符串到浏览器的window.location.href里,然后在detail.html(详情)页面里，就可以去window.location.href里拿参数，再根据参数请求ajax交互数据，加载详情页面的内容。

第一个页面,未点击时,window.loaction.href里还没有追加参数字符串

点击后,window.loaction.href里追加了参数字符串

如何拿到参数?代码如下:

3、通过window.location.open

 

如何接收?代码:

效果图

代码

 

作者：qq_39390710 
来源：CSDN 
原文：https://blog.csdn.net/qq_39390710/article/details/80851090 
版权声明：本文为博主原创文章，转载请附上博文链接！