点击超链接,将页面中某个数据传到另一个页面

<input type="text" name="name">
<input type="text" name="age">
<a href="javascript:location.href=‘test.html?name=‘+document.getElementsByTagName(‘input‘)[0].value+‘&age=‘+document.getElementsByTagName(‘input‘)[1].value;">test</a>
<p id="p1">1234567890</p>
<a href="javascript:;" onclick="convey()">测试二</a>
<a class="btn2" href="text2.html">使用cookie保存数据,在别的页面获取cookie值</a>
<a href="text2.html" class="btn3">使用localStorage保存数据,在别的页面获取值</a>
<script>
    function convey(){
        var p=document.getElementById(‘p1‘).innerHTML;
        location.href=‘text2.html?key=‘+p;
    }
    //cookie不能在本地浏览,只能在线看
    $(function(){
        $(‘.btn2‘).click(function(){
            var p2=$(‘p‘).text();
            $.cookie(‘data‘,p2,1);//第一个参数为自定义的key,第二个参数为value值,第三个参数为有效时间
        })
    })
    //localStorsge保存数据,在html5的文件夹里可以查看例子
    var p3=$(‘p‘).text();
    $(‘.btn3‘).click(function(){
        localStorage.setItem(‘data1‘,p3);//第二个参数必须是字符串形式,如果是json形式,就需要使用JSON.Stringify()转化成字符串形式
    })

另一个页面获取数据text2.html

  function GetQueryString(name)
    {//window.location.search  查问号
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

    // 调用方法
    alert(GetQueryString("key"));
    //cookie方式
    console.log($.cookie(‘data‘));     //localStorage方式
    console.log(localStorage.getItem(‘data1‘));

注:使用cookie保存数据,读取数据时,使用了cookie的插件设置cookie,必须加上,可以在网站上下

<!--cookie插件-->
    <script src="jquery-1.8.3.min.js"></script>
    <script src="jquery.cookie.js"></script>

读取url携带的数据时,还有另外一种方法

function GetRequest() {

 var url = location.search; //获取url中"?"符后的字串,包括?
 var theRequest = new Object();
 if (url.indexOf("?") != -1) {
  var str = url.substr(1);
  strs = str.split("&");
  for(var i = 0; i < strs.length; i ++) {
   theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
  }
 }
 return theRequest;
}
var Request = new Object();
Request = GetRequest();
var v1;
v1 = Request[‘‘key‘‘];

其他参数获取介绍:

//设置或获取对象指定的文件名或路径。


1

alert(window.location.pathname);

//设置或获取整个 URL 为字符串。


1

alert(window.location.href);

//设置或获取与 URL 关联的端口号码。


1

alert(window.location.port);

//设置或获取 URL 的协议部分。


1

alert(window.location.protocol);

//设置或获取 href 属性中在井号“#”后面的分段。


1

alert(window.location.hash);

//设置或获取 location 或 URL 的 hostname 和 port 号码。


1

alert(window.location.host);

//设置或获取 href 属性中跟在问号后面的部分。


1

alert(window.location.search);

时间: 2024-08-06 03:10:39

点击超链接,将页面中某个数据传到另一个页面的相关文章

php实现点击文字提交表单并传递数据至下一个页面

<?php $id="4";//等会要把这个数据传到第二个页面 ?> <?php echo "<li>"; echo "<form name=\"myquestion\" method=\"post\" action=\"question.php\">"; echo "<input name=\"questionID\&

微信点击图文消息链接 在根据判断跳到另一个页面 但是 点关闭 将当前的关闭之后 会出现空白页

<script> function ss() { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机location.href = '2.html?id=3323/#wechat_redirect'; } else if (u.indexOf('iPhone') > -1) {//苹果手机location.href = '2.html?id

Html页面中select下拉列表框别样用法,一个方法一劳永逸。

很多时候,我们写from表单面,给select标签赋值,都采用这种方式:1.MVC中设创建公共的分部视图:2.直接在前台面中,插入片段后台代码:今天我利用HTML5中的自定义属性,结合JQ扩展方法,写一个通用的JS方法,JS代码如下: $.fn.SetSelect = function () { return this.each(function () { var select = $(this); var url = $(this).attr("data-ajax"); var va

有序数组中两个数的和等于一个输入值的函数

题目:        输入一个已经按升序排序过的数组和一个数字,在数组中查找两个数,使得它们的和正好是输入的那个数字.要求时间复杂度为O(N). 如果有多对数字的和等于输入的数字,输出任意一对即可. 例如输入数组1,2,4,7,11,15和数字15,由于4+11=15,因此输出4和11. 代码如下: /*data[] 为有序数组, length 为数组的长度 sum为用户输入的和 num1 为符合和等于sum的第一个数 num2 为第二个数*/ #include<iostream> using

html一个页面链接携带参数跳转另一个页面基于vue2.0的element框架

来给生活比个耶! 1.按钮 <el-button @click="albumList(scope.row.id)" size="mini" type="primary" size="small">相册列表</el-button> 2.js函数 albumList (id){ location.href=`album_list.html?id=`+id /*跳转页面传递id值*/ }, 3.钩子函数 加载

html页面中iframe导致JavaScript失效

<body onload="reset()"> <div id="part1"> some thing here .... <div> <ifame src="xxxx"/> <script> function reset(){ var height = window.innerHeight; document.getElementById("part1").styl

页面中查询模块的设计与实现思路

在做一个物品的展示管理页面,想把增删改查都放到页面中,用axure画了一个页面,比较简单,主要分为上下两部分,上半部分是查询模块,下半部分是表格,用来展示数据.新增按钮单独在页面中,修改按钮在表的每一行数据后面,删除按钮在表格下面,将表格中的数据每一行设为可选,选择后进行删除操作.查询部分没有考虑很多,只是列了几个物品的主要属性,有下拉框有文本框,可选可填,然后查询,其实默认的就是这些查询条件之间是"与"的关系. 图1 自己设计的查询模块??项目在讨论的时候,技术领导说了一下这个地方设

Visual Studio 2013新建ASP.NET项目使用Empty模板,在页面中使用验证控件出错的解决方案

Visual Studio 2013新建ASP.NET项目使用Empty模板,在页面中使用验证控件,运行页面,会出现如下的错误: 错误原因 VisualStudio 2012(或2013) WebForm 4.5 开发中,很多控件默认Enable了 Unobtrusive ValidationMode(所谓Unobtrusive Validation,就是一种隐式的验证方式)的属性(和jquery的引用相关),但并未对其进行赋值, Programmer必须手动对其进行设置.比如,在进行数据验证时

在JSP页面中获取本页的文本框值(亲测可用)

对我很有用,就记在这了,方便再学习. 项目中用到一个查询条件,点击查询后,需要将结果显示在本页中.但是需要能在本页面中取值,如何不通过别的页面或action/servlet第三方来获得该文本框的值呢.百思不得其解...... 还是我们老大见多识广,在高人指点下不费吹灰之力就解决了(但是需要在JSP页面中写JAVA代码) 首先是一个form表单,里面有一个文本框或其它的表单项 <form name="thisform"method="post"><i