详解前端在html页面之间传递参数的方法_如何将数据传递到<h1>

41 浏览量更新于2023-03-16 评论收藏 75KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了详解前端在html页面之间传递参数的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

项目中经常会出现的一种情况，有一个列表，譬如是案例列表，点击列表中的某一项，跳转至详情页面。详情是根据所点击的

某条记录生成的，因为案例和具体的详情页面，都是用户后期自行添加的，我们开始编写时，不可能穷尽。因此跳转页面时，

我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成页面。因此，通过a

标签跳转的方式，肯定是行不通的。

我们经常写form表单，提交时，可以传递参数，如果使用表单，并将其隐藏起来，应该可以达到效果。

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

1、通过、通过form表单传递参数表单传递参数

<head>

<title>Document</title>

</head>

<body>

</form>

</form>

</form>

</body>

</html>

function foo(){

var frm = window.event.srcElement;

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

return true;

}

</script>

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

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

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

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

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

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

2、通过、通过window.location.href

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

页面的内容。

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38534444

粉丝: 2
资源: 889

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

ajax\HTML 页面与页面之间传值

html页面跳转传递参数Demo

HTML5 使用 sessionStorage 进行页面传值的方法

pthread_create传递参数详解

小程序navigateback传值_微信小程序 页面跳转传递值几种方法详解

Java引用传递详解

grpc创建连接grpc.Dial 所有可传递的参数详解

详解HandlerMethodArgumentResolver类的resolveArgument方法及其方法参数

android studio 跳转后保留原页面数据_Intent详解以及Activity的跳转与数据传递

关于html页面优化,关于html页面优化的实例详解

servlet的坑_详解Spring框架下向异步线程传递HttpServletRequest参数的坑

springboot controller中参数解析详解

request.setAttribute的参数详解

python playwright chromium.launch()方法参数详解

Mybatis中parameterMap参数详解

jmeter获取token传递给下一个线程组详解

nacos配置参数详解

二叉树的创建传递参数为什么要用二级指针，详解

python super 方法 详解

pytest参数化详解

会员权益专享

最新资源

小程序navigateback传值_微信小程序页面跳转传递值几种方法详解

python super 方法详解