大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

javascript怎么实现页面跳转和传值

本篇内容介绍了“javascript怎么实现页面跳转和传值”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

成都创新互联公司长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为宝坻企业提供专业的成都网站设计、成都做网站,宝坻网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

一、JavaScript 实现页面跳转的方法

  1. window.location.href

window.location.href 的作用是加载新的页面。通过这个方法,可以在当前页面跳转到指定的页面。例如,下面的代码可以在当前页面跳转到被指定为 “newpage.html” 的页面:

window.location.href = "newpage.html";

在进行页面跳转的同时,也可以向新页面传递参数。例如:

window.location.href = "newpage.html?username=Tom&age=20";

  1. window.location.replace

另一种实现页面跳转的方法是使用 window.location.replace。这个方法的作用是用新的页面替换当前页面。例如,下面的代码将会在当前页面被指定为 “newpage.html” 的页面所替换:

window.location.replace("newpage.html");

对于这个方法而言,在进行页面跳转的同时是不能传递参数的。

  1. window.open

window.open 允许以新的浏览器窗口方式打开一个指定的网页。例如,下面的代码将会在新的窗口中打开一个指定为 “newpage.html” 的页面:

window.open("newpage.html");

同样的,通过这个方法同样可以传递参数。例如:

window.open("newpage.html?username=Tom&age=20");

二、JavaScript 页面传参的方法

  1. URL 传参数

URL 传参数是实现页面传参的一种简单易用的方法,它将参数作为 URL 中的参数传递给新页面。例如:

window.location.href = "newpage.html?username=Tom&age=20";

在新页面中,可以使用 JavaScript 中的 URLSearchParams 对象获取 URL 中的参数。例如:

//获取 URL 中的参数  
const searchParams = new URLSearchParams(window.location.search);

//获取用户名  
const username = searchParams.get('username');

//获取年龄  
const age = searchParams.get('age');

  1. sessionStorage

sessionStorage 是 HTML5 提供的 Web 存储方案,与 localStorage 相似,但是存储的数据是会话级别的,当会话结束时数据会被清除。可以使用 sessionStorage 在页面之间传递数据。例如,在前一个页面中设置传递的参数:

//设置传递的参数  
sessionStorage.setItem('username', 'Tom');
sessionStorage.setItem('age', 20);

在后一个页面中,可以通过 sessionStorage 获取传递的参数:

//获取传递的参数  
const username = sessionStorage.getItem('username');
const age = sessionStorage.getItem('age');

  1. localStorage

localStorage 也是 HTML5 提供的 Web 存储方案,与 sessionStorage 不同的是,localStorage 存储数据是永久性的,即使关闭页面或浏览器也不会被清除。可以使用 localStorage 在页面之间传递数据。例如,在前一个页面中设置传递的参数:

//设置传递的参数  
localStorage.setItem('username', 'Tom');
localStorage.setItem('age', 20);

在后一个页面中,可以通过 localStorage 获取传递的参数:

//获取传递的参数  
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

三、应用实例

下面是一个实际应用的例子,实现一个包含表单的页面跳转,并将表单中的数据传递到下一个页面。

  1. 页面一(index.html)

 
 

  
页面一

 

       
           用户名:                  
       
           密码:                  
      跳转到页面二    

 

  1. 页面二(pageTwo.html)

 
 

  
页面二

 

       

用户名:

       

  
  
       

密码:

       

  
  

 

在页面一中,当点击提交按钮时,会执行 submitForm 方法,将表单中的数据拼接成一个参数并传递到页面二中。在页面二中,会通过 getSearchParams 方法获取 URL 参数并显示在页面上。

“javascript怎么实现页面跳转和传值”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


标题名称:javascript怎么实现页面跳转和传值
网站地址:http://dzwzjz.com/article/joejeg.html
在线咨询
服务热线
服务热线:028-86922220
TOP