js怎么获取传过来的页面值

获取传过来的页面值的方法有：通过URL参数获取、通过表单传值获取、通过LocalStorage获取。 其中，通过URL参数获取是最常用的一种方式。URL参数是在URL的问号后面附加的键值对，通过JavaScript可以轻松地解析这些参数并获取相应的值。以下是详细描述：

通过URL参数获取页面值可以使用JavaScript的URLSearchParams对象来解析URL中的查询字符串。假设页面的URL是https://example.com?page=2&sort=asc，你可以通过下面的代码获取参数值：

const urlParams = new URLSearchParams(window.location.search);
const page = urlParams.get('page'); // 获取到 '2'
const sort = urlParams.get('sort'); // 获取到 'asc'

下面将详细探讨获取传过来的页面值的方法。

一、通过URL参数获取

通过URL参数传递值是最常见的方式之一，这种方法通常用于分页、筛选条件等场景。

1.1 使用 `URLSearchParams` 对象

URLSearchParams 对象可以方便地解析URL中的查询字符串。它提供了多种方法来获取、设置、删除和遍历查询参数。

const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get('paramName');

示例

假设你有一个URL https://example.com?user=JohnDoe&age=25，你可以使用如下代码获取这些参数的值：

const urlParams = new URLSearchParams(window.location.search);
const user = urlParams.get('user'); // 'JohnDoe'
const age = urlParams.get('age'); // '25'

1.2 手动解析URL

如果不使用 URLSearchParams，也可以手动解析URL查询字符串。

示例

function getQueryParams(url) {
    const params = {};
    const parser = document.createElement('a');
    parser.href = url;
    const query = parser.search.substring(1);
    const vars = query.split('&');
    vars.forEach(function(v) {
        const pair = v.split('=');
        params[pair[0]] = decodeURIComponent(pair[1]);
    });
    return params;
}
const params = getQueryParams(window.location.href);
const user = params['user']; // 'JohnDoe'
const age = params['age']; // '25'

二、通过表单传值获取

当用户提交表单时，可以将表单数据传递到另一个页面。通过JavaScript，可以获取这些表单数据。

2.1 使用 `FormData` 对象

FormData 对象提供了一个易于使用的接口，用于生成表示表单数据的键值对集合。

示例

<form id="myForm">
  <input type="text" name="username" value="JohnDoe">
  <input type="text" name="age" value="25">
  <button type="submit">Submit</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  const username = formData.get('username'); // 'JohnDoe'
  const age = formData.get('age'); // '25'
});

2.2 通过 `fetch` 提交表单数据

在提交表单数据时，可以使用 fetch API 将数据发送到服务器，并在JavaScript中处理响应。

示例

<form id="myForm">
  <input type="text" name="username" value="JohnDoe">
  <input type="text" name="age" value="25">
  <button type="submit">Submit</button>
</form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  const formData = new FormData(this);
  fetch('/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });
});

三、通过LocalStorage获取

LocalStorage是一种在浏览器中存储数据的机制，数据在页面刷新或关闭后仍然存在。

3.1 设置和获取LocalStorage值

示例

// 设置值
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', '25');
// 获取值
const username = localStorage.getItem('username'); // 'JohnDoe'
const age = localStorage.getItem('age'); // '25'

3.2 检查LocalStorage支持

在使用LocalStorage之前，最好检查浏览器是否支持它。

示例

if (typeof(Storage) !== "undefined") {
  // 浏览器支持LocalStorage
  localStorage.setItem('username', 'JohnDoe');
} else {
  console.error("LocalStorage is not supported by this browser.");
}

四、通过Cookies获取

Cookies是一种在浏览器中存储数据的机制，通常用于会话管理、用户跟踪等。

4.1 设置和获取Cookies

示例

// 设置Cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2021 12:00:00 UTC; path=/";
// 获取Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}
const username = getCookie('username'); // 'JohnDoe'

4.2 检查Cookies支持

在使用Cookies之前，最好检查浏览器是否支持它。

示例

if (navigator.cookieEnabled) {
  // 浏览器支持Cookies
  document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2021 12:00:00 UTC; path=/";
} else {
  console.error("Cookies are not supported by this browser.");
}

五、通过SessionStorage获取

SessionStorage是一种在浏览器中存储数据的机制，数据在页面刷新后仍然存在，但在页面关闭后会被清除。

5.1 设置和获取SessionStorage值

示例

// 设置值
sessionStorage.setItem('username', 'JohnDoe');
sessionStorage.setItem('age', '25');
// 获取值
const username = sessionStorage.getItem('username'); // 'JohnDoe'
const age = sessionStorage.getItem('age'); // '25'

5.2 检查SessionStorage支持

在使用SessionStorage之前，最好检查浏览器是否支持它。

示例

if (typeof(Storage) !== "undefined") {
  // 浏览器支持SessionStorage
  sessionStorage.setItem('username', 'JohnDoe');
} else {
  console.error("SessionStorage is not supported by this browser.");
}

六、通过PostMessage获取

在跨域通信中，可以通过postMessage方法来传递数据。

6.1 使用 `postMessage` 传递数据

示例

在父窗口中：

const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent', 'https://child.example.com');

在子窗口中：

window.addEventListener('message', function(event) {
  if (event.origin === 'https://parent.example.com') {
    console.log(event.data); // 'Hello from parent'
  }
});

6.2 安全性考虑

在使用 postMessage 时，一定要指定目标窗口的源，确保数据传输的安全性。

示例

const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent', 'https://child.example.com');

在子窗口中：

window.addEventListener('message', function(event) {
  if (event.origin === 'https://parent.example.com') {
    console.log(event.data); // 'Hello from parent'
  }
});

七、通过AJAX获取

AJAX是一种在不重新加载整个页面的情况下，与服务器交换数据的技术。

7.1 使用XMLHttpRequest

示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

7.2 使用Fetch API

Fetch API是一个现代的、基于Promise的API，用于进行网络请求。

示例

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

八、通过WebSocket获取

WebSocket是一种在单个TCP连接上进行全双工通信的协议，适用于实时应用。

8.1 创建WebSocket连接

示例

const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
  console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
  console.log('Received data:', event.data);
};
socket.onclose = function(event) {
  console.log('WebSocket is closed now.');
};
socket.onerror = function(error) {
  console.error('WebSocket Error:', error);
};

8.2 发送和接收数据

示例

const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
  socket.send('Hello Server!');
};
socket.onmessage = function(event) {
  console.log('Received data:', event.data);
};

九、通过服务器端渲染获取

在服务器端渲染的页面中，可以通过模板引擎将数据嵌入到HTML中，在前端通过JavaScript获取这些数据。

9.1 使用模板引擎

假设使用了一个模板引擎，如EJS，将数据渲染到页面中。

示例

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <div id="data" data-user="<%= user %>" data-age="<%= age %>"></div>
  <script>
    const dataDiv = document.getElementById('data');
    const user = dataDiv.getAttribute('data-user'); // 'JohnDoe'
    const age = dataDiv.getAttribute('data-age'); // '25'
  </script>
</body>
</html>

通过以上几种方法，可以在不同的场景下获取传过来的页面值，每种方法都有其适用的场景和优缺点。根据具体需求选择合适的方法，可以有效提高开发效率和用户体验。