phpstudy集成环境

 首页 > jquery 纯html页面之间如何传递参数？？

jquery 纯html页面之间如何传递参数？？

a页面的一段代码

<li id="template">
    <a href="course/course_detail.html" data-ajax='false'>
        <img src="images/01.png" id="_img"/>
        <h3 id="Course_Name"></h3>
        <p>
            讲师：<span id="Teachername"></span>
            时长<span id="Credit_hour"></span>分钟
            时间：<span id="Course_CreateDate"></span>
        </p>
    </a>
</li>

b页面的一段代码

      <tr>
        <td class="table_1">课程名称：</td>
        <td colspan="3" class="table_2">心情美好</td>
      </tr>
      <tr>
        <td class="table_1">时长：</td>
        <td class="table_1">2</td>
        <td class="table_1">讲师：</td>
        <td class="table_2">专家团</td>
      </tr>

我想把a页面 li 里面每个 span 标签 id 获取到的值，传到b页面对应的 td 里，求指导。

a，b页面同用一个js文件，然后将a页面li里面每个span 标签id获取到的值，保存到一个js的全局变量中，在加载b页面通过js创建table，

来自 iteye 的文章：HTML5本地存储不完全指南

如果你的程序需要在不同页面访问同一个值，你可能需要了解这个值是否已经被其他页面改变了，这可以通过向浏览器注册storage事件来实现：

window.addEventListener('storage', function(e) {
    console.log(e.key + "'s value is changed from '" +
        e.oldValue + "' to '" + e.newValue + "' by " + e.url);
}, false);

//A页面
localStorage['foo'] = 'bar';

//B页面
localStorage['foo'] = 'newBar';

这时你应该会在 A 页面的 Console 中看到： 

foo’s value is changed from ‘bar’ to ‘newbar’ by http://localhost/test.html

要么就是URL 传参，要么就是用COOKIE

javascript获取url参数的值

location.search可以返回从"?"开始的值。

你可以用以下专业第三方库进行获取值操作：
uri.js
parseURL.js

一句话概括，纯html页面之间的传值可以通过url后面的参数进行比如：

b.html?teacher=xx&time=xxx

回到问题中，首先从a.html到b.html需要一个跳转方式，比方说在a.html页面里面你有一个链接：

<a href="b.html" id="toPageB">跳转到b页面</a>

剩下的就好办了，依次取得你需要的参数，然后修改页面url:

var dataFromLi=[$("#Teachername").text(),$("#Credit_hour").text()];
$("#toPageB").attr("href","b.html?data="+dataFromLi);

然后在b.html页面解析url，获取参数。

更新，如何根据url获取参数：

window.location.search 会返回所有地址栏从“?”开始的字符串。获取某个参数值可以通过正则，下面是一个简单的获取参数的函数：

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

如果你采用jQuery，你可以用更简单的办法：

$.url().param('data');

总结一下：

方法有 2 种：

  1. 通过 url 传递
  2. 通过本地存储

第一种方法：http://.com/q/1010000000308712#a-1020000000308821
第二种方法：http://.com/q/1010000000308712#a-1020000000308852

html5的话可以用 sessionStorage 或 localStorage

很容易的

sessionStorage 是会话存储，关闭浏览器就没了

localStorage 是持久化存储，完全可以替代cookie 存储空间更大。

实现方法

存：sessionStorage["par1"]="123";

取：sessionStorage["par1"]

localStorage实现方法和sessionStorage一样

【热门文章】
【热门文章】