程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2023-06(2)

Web 页面之间传递参数的几种方法

发布于2023-06-20 20:09     阅读(1223)     评论(0)     点赞(10)     收藏(4)


Web 页面之间传递参数的方法有很多种,下面列出一些常见的方法以及它们的代码示例。

一、前端直接传递参数

  • 1、URL 参数传递(query string):通过 URL 的查询字符串(即问号后面的参数)将参数传递给页面。可以通过location.searchURLSearchParams对象来获取和解析参数。
  1. // 发送参数
  2. const params = {id: 123, name: 'Alice'};
  3. const url = `http://example.com/page?${new URLSearchParams(params)}`;
  4. window.location.href = url;
  5. // 接收参数
  6. const searchParams = new URLSearchParams(window.location.search);
  7. const id = searchParams.get('id');
  8. const name = searchParams.get('name');

 2、URL hash传递:通过 URL 的 hash 值来传递参数。例如,http://example.com/#/page?id=1可以传递一个名为id的参数。可以通过location.hash来获取和解析hash值中的参数。

  1. // 发送参数
  2. const id = 123;
  3. window.location.hash = `#id=${id}`;
  4. // 接收参数
  5. const searchParams = new URLSearchParams(window.location.hash.substring(1));
  6. const id = searchParams.get('id');

 3、URL 路径传递:通过 URL 的路径参数来传递参数。例如,/users/:id可以传递一个名为id的参数。可以通过路由框架(如 React Router)来解析路径参数。

  1. // 发送参数
  2. const id = 123;
  3. window.location.href = `http://example.com/page/${id}`;
  4. // 接收参数
  5. const id = parseInt(window.location.pathname.split('/').pop());

 4、JavaScript 变量:通过 JavaScript 变量来传递参数。可以在不同的页面之间共享全局变量,或者在一个页面内使用模块化开发来传递参数。

  1. // 发送参数
  2. const id = 123;
  3. window.myGlobalId = id;
  4. // 接收参数
  5. const id = window.myGlobalId;

 5、Cookie:通过在浏览器中存储 Cookie 来传递参数。可以通过document.cookie来读取和设置 Cookie。

  1. // 发送参数
  2. document.cookie = 'id=123; path=/';
  3. // 接收参数
  4. const cookies = document.cookie.split(';').map(cookie => cookie.trim().split('='));
  5. const id = cookies.find(cookie => cookie[0] === 'id')[1];

 6、Web 存储:过 HTML5 的localStoragesessionStorage来在浏览器中存储数据。可以通过localStorage.getItem()localStorage.setItem()等方法来读取和设置存储的值。

  1. // 发送参数
  2. localStorage.setItem('id', 123);
  3. // 接收参数
  4. const id = localStorage.getItem('id');

 7、自定义事件:通过自定义事件来在不同的组件之间传递数据。可以通过CustomEvent对象来定义和触发自定义事件,通过element.dispatchEvent()方法来触发事件。

  1. // 发送参数
  2. const event = new CustomEvent('myEvent', {detail: {id: 123, name: 'Alice'}});
  3. document.dispatchEvent(event);
  4. // 接收参数
  5. document.addEventListener('myEvent', event => {
  6. const {id, name} = event.detail;
  7. });

 

二、后端间接传递参数

  • 8、表单提交:过表单的提交将表单中的数据传递给后台服务器或其他页面。可以通过form元素的submit方法或XMLHttpRequest对象来实现表单提交。
    1. <!-- 发送参数 -->
    2. <form method="POST" action="http://example.com/page">
    3. <input type="text" name="id" value="123">
    4. <input type="text" name="name" value="Alice">
    5. <button type="submit">提交</button>
    6. </form>
    7. <!-- 接收参数 -->
    8. <?php
    9. $id = $_POST['id'];
    10. $name = $_POST['name'];
    11. ?>

    9、WebSocket:通过 WebSocket 协议在浏览器和服务器之间实时传递数据。可以使用 WebSocket API 来建立 WebSocket 连接,并通过WebSocket.send()方法来发送数据。

  1. // 发送参数
  2. const id = 123;
  3. const ws = new WebSocket('ws://example.com');
  4. ws.onopen = () => ws.send(JSON.stringify({id}));
  5. // 接收参数
  6. const ws = new WebSocket('ws://example.com');
  7. ws.onmessage = event => {
  8. const {id} = JSON.parse(event.data);
  9. };

 10、Fetch API:通过 Fetch API 发送 HTTP 请求,并通过请求的 body 传递数据。可以使用fetch()方法来发送请求,并通过body参数传递数据。

  1. // 发送参数
  2. const params = {id: 123, name: 'Alice'};
  3. fetch('http://example.com/page', {
  4. method: 'POST',
  5. headers: {'Content-Type': 'application/json'},
  6. body: JSON.stringify(params)
  7. });
  8. // 接收参数
  9. const body = await fetch('http://example.com/page').then(res => res.json());
  10. const {id, name} = body;

 11、AJAX:通过 XMLHttpRequest 对象发送异步 HTTP 请求,通过请求的参数传递数据。可以通过XMLHttpRequest.send()方法发送请求,通过XMLHttpRequest.onreadystatechange事件监听请求的状态变化。

  1. // 发送参数
  2. const xhr = new XMLHttpRequest();
  3. xhr.open('POST', 'http://example.com/page');
  4. xhr.setRequestHeader('Content-Type', 'application/json');
  5. xhr.onreadystatechange = function() {
  6. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  7. console.log(xhr.responseText);
  8. }
  9. };
  10. const params = {id: 123, name: 'Alice'};
  11. xhr.send(JSON.stringify(params));
  12. // 接收参数
  13. const xhr = new XMLHttpRequest();
  14. xhr.open('GET', 'http://example.com/page');
  15. xhr.onreadystatechange = function() {
  16. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  17. const {id, name} = JSON.parse(xhr.responseText);
  18. }
  19. };
  20. xhr.send();

 

原文链接:https://blog.csdn.net/lwf3115841/article/details/129115106




所属网站分类: 技术文章 > 博客

作者:前端黄柠檬

链接:http://www.qianduanheidong.com/blog/article/528933/fd7a3da5e0998ea60600/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

10 0
收藏该文
已收藏

评论内容:(最多支持255个字符)