关于两个HTML页面传值的一个小方法

之前写demo项目,两次都要用到HTML页面传值,但是记性不好,每次都要上百度找方法,所以想干脆自己记下来,忘了就查看。

常用场景

  • 在做管理系统的时候,往往有编辑某条数据的信息,编辑页面一般是跳进一个新的页面,那个页面上会显示相关的信息,显示出相关信息时,必定是上个页面传来的。
  • 当初我第一反应是点击编辑时,跳servlet,在session中存这些键值对。然后进入编辑界面时再到servlet中读出这些值,同时将session中这些值删掉。
  • 但是首先,这样就请求了两次servlet了,效率低肯定不适用,而且也懒得写这么多代码;其次就是如果我点击刷新,那么session中的值被删掉了,刷新后的页面就没有值了(如果不删session的值,会导致编辑其他数据时有冲突)。
  • 所以当时就想到了HTML之间能不能直接传值,比如url传值那种方式。

上代码

代码其实也很简单。

  1. 在主页面点击编辑时,将信息装到url中,一起跳到编辑页面:
    window.location.href='edit.html?id=10';
    或者通过a标签也行:

  2. 在编辑界面(edit.html)中,获取url的地址上?之后的字符串(包括?):
    var word = window.location.search;
    获取到的字符串word为“?id=9”。

  3. 将word中要用到的字符串截取下来:
    js中的字符串提供了一个方法slice(),它可以将指定位置后的字符串截取下来:
    var stu_id = word.slice(4);
    此时如果word为 ?id=9,那么stu_id=9
    如果word为?id=65535,那么stu_id=65535


总结

  • 当然,如果稍加思考,也会发现这个方法只适合传一个值过去 ,然后在edit.html页面中还是要通过这个值查询一次,只是相比存session要方便很多,但不是最好的方法
  • 追求更好的方法的话,还要考虑解决url中传中文字符时的转码解码问题,和用正则表达式来传多个值

你可能感兴趣的:(关于两个HTML页面传值的一个小方法)