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 里,求指导。

阅读 98.1k
8 个回答

来自 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 

一句话概括,纯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');

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

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

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

html5的话可以用 sessionStorage 或 localStorage

很容易的

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

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

实现方法

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

取:sessionStorage["par1"]

localStorage实现方法和sessionStorage一样

新手上路,请多包涵

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

推荐问题
宣传栏