关闭

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

标签: html之间传递参数表单
46191人阅读 评论(0) 收藏 举报
分类:

项目中经常会出现的一种情况,有一个列表,譬如是案例列表,点击列表中的某一项,跳转至详情页面。详情是根据所点击的某条记录生成的,因为案例和具体的详情页面,都是用户后期自行添加的,我们开始编写时,不可能穷尽。因此跳转页面时,我们需要传递一个参数过去,这样我们才能通过这个参数进行数据请求,然后根据后台返回的数据来生成页面。因此,通过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"> 
            <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>
    </body>
</html>
<script>
    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; });

当前页面会被替换成recieve.html的页面,页面的url变为:
这里写图片描述
然后我们再用上面的方法提取自己需要的参数

3、通过window.location.open

如果是希望打开一个新页面,而不是改变当前的页面,那么window.location.href就不适用了,此时,我们需要借助于window.location.open()来实现
简单介绍有一下window.open()函数,window.open()有三个参数,第一个参数是要打开的页面的url,第二个参数是窗口目标,第三个参数是一个特定字符串以及一个表示新页面是否取代浏览器历史集中当前加载页面的布尔值,通过只需要传递第一个参数。第二个参数还可以是”_blank”,”_self”,”_parent”,”_top”这样的特殊窗口名称,”_blank”打开新窗口,”_self”实现的效果同window.location.href.
继续上面的例子:

<script>
    var index = "lemon";
    var url = "receive.html?index="+index;
    $("#more").click(function(){
        window.open(url)
    });
</script>

这样在点击的时候,就会打开一个新页面,页面的url地址与上面相同。
由于浏览器的安全限制,有些浏览器在弹出窗口配置方面增加限制,大多数浏览器都内置有弹出窗口的屏蔽程序,因此,弹出窗口有可能被屏蔽,在弹出窗口被屏蔽时,需要考虑两种可能性,一种是浏览器内置的屏蔽程序阻止弹出窗口,那么 window.open()很可能返回Null,此时,只要监测这个返回的值就可以确定弹出窗口是否被屏蔽。

var newWin = window.open(url);
if(newWin == null){
    alert("弹窗被阻止");
}

另一种是浏览器扩展或其他程序阻止的弹出窗口,那么window.open()通常会抛出一个错误,因此,要像准确的检测弹出窗口是否被屏蔽,必须在检测返回值的同时,将window.open()封装在try-catch块中,上面的例子中可以写成如下形式:

<script>
    var blocked = false;
    try{
        var index = "lemon";
        var url = "receive.html?index="+index;
        $("#more").click(function(){
           var newWin = window.open(url);
           if(newWin == null){
               blocked = true;
           }
        });
    } catch(ex){
        block = true;
    }
    if(blocked){
        alert("弹出窗口被阻止");
    }    
</script>
2
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

在两个html页面之间传值小示例

最近在搞前端的一些开发,在两个页面之间进行传值,虽然搜了写资料但是不是自己想要的,因为用到了一些框架,所有内容相当于在一个html中,与普通的两个独立的html页面直接的传递值的方法不太一样,记之,以...
  • ABC__D
  • ABC__D
  • 2016-03-08 16:26
  • 10056

在静态页面html中跳转传值

在html中通过"?"传值--------静态传值 在跳转到的页面index2.html中接收----var name=UrlParm.parm("name"); 代码如下: index...
  • caoyuan10036
  • caoyuan10036
  • 2012-02-02 09:24
  • 21846

HTML页面之间跳转传值

1.借助JQuery,通过URL拼接,从而传递数据。   jquery.params.js用于两个HTML网页之间的传值。a.html?name=waley&age=20;b.html页面则可以这样获...
  • waley_yang
  • waley_yang
  • 2016-04-19 18:44
  • 18109

html 页面之间跳转和传值

从a.html 跳转到b.html 并吧 a.html 的值传入b.html a.html New Document function to (){...
  • caofeilong20941
  • caofeilong20941
  • 2013-06-05 14:28
  • 56990

静态页面之间传递参数

a.html页面向b.html 页面传值的一种解决方案是通过url传递参数然后想办法在b.html获取参数。对于这种方案的实现的困难之处在于如何在b.html页面获取参数,笔者最后利用了JQuery实...
  • wangzl1163
  • wangzl1163
  • 2015-10-20 14:56
  • 1853

Jquery在两个HTML页面之间传递参数

待跳转页面JS: function openreverspage() {     var row = $("#dg").datagrid('getSelected');     alert(.....
  • caiandyong
  • caiandyong
  • 2015-06-20 21:59
  • 4327

实现html页面的参数传递

实现html页面的参数传递   方法一: 下面是javascrīpt的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数。 有了这个函数,就可...
  • p312011150
  • p312011150
  • 2017-06-20 10:59
  • 213

不同页面之间实现参数传递的几种方式讨论

不同页面之间实现参数传递的几种方式讨论(黎声)    由于web系统采用http协议在浏览器和服务器之间传输数据,而http协议是一种无状态的协议,如何在不同页面之间传递数据,可以有一下几种方式 ...
  • xyw591238
  • xyw591238
  • 2016-07-14 10:43
  • 2106

页面之间传递参数的几种方法荟萃

第一种方法:通过URL链接地址传递 send.aspx:  protected void Button1_Click(object sender, EventArgs e)    {     ...
  • 21aspnet
  • 21aspnet
  • 2007-03-21 21:03
  • 4287

JSP页面之间传值的方法总结

B/S页面间通信 HTTP是无状态的协议。Web页面本身无法向下一个页面传递信息,如果需要让下一个页面得知该页面中的值,除非通过服务器。因此,Web页面保持状态并传递给其它页面,是一个重要的技术。 W...
  • HLK_1135
  • HLK_1135
  • 2016-10-13 21:03
  • 11287
    个人资料
    • 访问:637115次
    • 积分:46810
    • 等级:
    • 排名:第75名
    • 原创:112篇
    • 转载:0篇
    • 译文:0篇
    • 评论:164条
    博客专栏
    最新评论