js传参数接收参数页面怎么写

在JavaScript中传递和接收参数的页面写法包含：通过URL传递参数、通过表单传递参数、通过函数调用传递参数、使用LocalStorage或SessionStorage传递参数。 其中，通过URL传递参数最为常见和实用。

通过URL传递参数可以非常方便地在多个页面之间共享数据。具体来说，可以使用window.location对象来获取当前页面的URL，并解析出其中的参数。此外，可以通过JavaScript的函数调用将参数在不同的函数之间传递。下面将详细展开这几种方法的实现。

一、通过URL传递参数

通过URL传递参数是非常常见的方法，特别是在页面之间进行数据传递时。URL参数通常以查询字符串的形式附加在URL的末尾，查询字符串以问号?开始，多个参数之间用与号&连接。

1.1 传递参数

在传递参数的页面中，可以通过JavaScript构造目标URL并附加参数。例如，我们想从PageA.html传递参数到PageB.html：

<!-- PageA.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page A</title>
</head>
<body>
    <script>
        function redirectToPageB() {
            const param1 = 'value1';
            const param2 = 'value2';
            const url = `PageB.html?param1=${param1}&param2=${param2}`;
            window.location.href = url;
        }
    </script>
    <button onclick="redirectToPageB()">Go to Page B</button>
</body>
</html>

1.2 接收参数

在接收参数的页面中，需要解析URL并提取查询字符串中的参数。可以使用URLSearchParams对象来简化这一过程：

<!-- PageB.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page B</title>
</head>
<body>
    <script>
        function getParams() {
            const params = new URLSearchParams(window.location.search);
            const param1 = params.get('param1');
            const param2 = params.get('param2');
            console.log(`Param1: ${param1}, Param2: ${param2}`);
            document.getElementById('param1').innerText = param1;
            document.getElementById('param2').innerText = param2;
        }
        window.onload = getParams;
    </script>
    <div>Param1: <span id="param1"></span></div>
    <div>Param2: <span id="param2"></span></div>
</body>
</html>

二、通过表单传递参数

表单是另一种常见的传递参数的方式。通过表单，可以将用户输入的数据提交到服务器，或者在前端页面之间传递数据。

2.1 创建表单并提交

在PageA.html中创建表单，并将数据提交到PageB.html：

<!-- PageA.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page A</title>
</head>
<body>
    <form action="PageB.html" method="GET">
        <label for="param1">Param1:</label>
        <input type="text" id="param1" name="param1"><br>
        <label for="param2">Param2:</label>
        <input type="text" id="param2" name="param2"><br>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

2.2 接收表单参数

在PageB.html中解析URL并提取查询字符串中的参数：

<!-- PageB.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page B</title>
</head>
<body>
    <script>
        function getParams() {
            const params = new URLSearchParams(window.location.search);
            const param1 = params.get('param1');
            const param2 = params.get('param2');
            console.log(`Param1: ${param1}, Param2: ${param2}`);
            document.getElementById('param1').innerText = param1;
            document.getElementById('param2').innerText = param2;
        }
        window.onload = getParams;
    </script>
    <div>Param1: <span id="param1"></span></div>
    <div>Param2: <span id="param2"></span></div>
</body>
</html>

三、通过函数调用传递参数

在JavaScript中，函数调用是另一种常见的传递参数的方式。这种方法通常用于在同一个页面内不同函数之间传递数据。

3.1 定义和调用函数

在同一个页面内，可以通过函数调用传递参数。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Function Call Example</title>
</head>
<body>
    <script>
        function displayParams(param1, param2) {
            console.log(`Param1: ${param1}, Param2: ${param2}`);
            document.getElementById('param1').innerText = param1;
            document.getElementById('param2').innerText = param2;
        }
        function getParamsAndDisplay() {
            const param1 = 'value1';
            const param2 = 'value2';
            displayParams(param1, param2);
        }
        window.onload = getParamsAndDisplay;
    </script>
    <div>Param1: <span id="param1"></span></div>
    <div>Param2: <span id="param2"></span></div>
</body>
</html>

四、使用LocalStorage或SessionStorage传递参数

LocalStorage和SessionStorage是Web存储API的一部分，用于在客户端存储数据。这种方法适用于在同一个浏览器会话中在不同页面之间传递数据。

4.1 存储数据

在PageA.html中存储数据到LocalStorage或SessionStorage：

<!-- PageA.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page A</title>
</head>
<body>
    <script>
        function storeParams() {
            const param1 = 'value1';
            const param2 = 'value2';
            localStorage.setItem('param1', param1);
            localStorage.setItem('param2', param2);
            window.location.href = 'PageB.html';
        }
    </script>
    <button onclick="storeParams()">Go to Page B</button>
</body>
</html>

4.2 读取数据

在PageB.html中读取LocalStorage或SessionStorage中的数据：

<!-- PageB.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page B</title>
</head>
<body>
    <script>
        function getParams() {
            const param1 = localStorage.getItem('param1');
            const param2 = localStorage.getItem('param2');
            console.log(`Param1: ${param1}, Param2: ${param2}`);
            document.getElementById('param1').innerText = param1;
            document.getElementById('param2').innerText = param2;
        }
        window.onload = getParams;
    </script>
    <div>Param1: <span id="param1"></span></div>
    <div>Param2: <span id="param2"></span></div>
</body>
</html>

五、在项目团队管理系统中的应用

在实际项目中，通过URL传递参数、表单传递参数、函数调用传递参数和使用LocalStorage或SessionStorage传递参数都是非常常见的需求。在项目团队管理系统中，经常需要在不同的页面之间传递数据，例如在研发项目管理系统PingCode和通用项目协作软件Worktile中，传递项目ID、任务ID等数据，以便在不同页面中显示相应的项目或任务详情。

5.1 在PingCode中的应用

在PingCode中，可以通过URL传递参数来在不同页面之间传递项目ID。例如，从项目列表页跳转到项目详情页时，可以在URL中附加项目ID：

<!-- ProjectList.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project List</title>
</head>
<body>
    <script>
        function viewProjectDetails(projectId) {
            const url = `ProjectDetails.html?projectId=${projectId}`;
            window.location.href = url;
        }
    </script>
    <button onclick="viewProjectDetails(123)">View Project 123</button>
</body>
</html>

在ProjectDetails.html中接收并显示项目ID：

<!-- ProjectDetails.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Details</title>
</head>
<body>
    <script>
        function getProjectId() {
            const params = new URLSearchParams(window.location.search);
            const projectId = params.get('projectId');
            console.log(`Project ID: ${projectId}`);
            document.getElementById('projectId').innerText = projectId;
        }
        window.onload = getProjectId;
    </script>
    <div>Project ID: <span id="projectId"></span></div>
</body>
</html>

5.2 在Worktile中的应用

在Worktile中，通过表单传递参数可以用于创建新任务，并在任务详情页面中显示任务信息。例如，在创建任务页面中，可以通过表单提交任务数据：

<!-- CreateTask.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Task</title>
</head>
<body>
    <form action="TaskDetails.html" method="POST">
        <label for="taskTitle">Task Title:</label>
        <input type="text" id="taskTitle" name="taskTitle"><br>
        <label for="taskDescription">Task Description:</label>
        <textarea id="taskDescription" name="taskDescription"></textarea><br>
        <button type="submit">Create Task</button>
    </form>
</body>
</html>

在TaskDetails.html中接收并显示任务数据：

<!-- TaskDetails.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Details</title>
</head>
<body>
    <script>
        function getTaskDetails() {
            const params = new URLSearchParams(window.location.search);
            const taskTitle = params.get('taskTitle');
            const taskDescription = params.get('taskDescription');
            console.log(`Task Title: ${taskTitle}, Task Description: ${taskDescription}`);
            document.getElementById('taskTitle').innerText = taskTitle;
            document.getElementById('taskDescription').innerText = taskDescription;
        }
        window.onload = getTaskDetails;
    </script>
    <div>Task Title: <span id="taskTitle"></span></div>
    <div>Task Description: <span id="taskDescription"></span></div>
</body>
</html>

结论

通过JavaScript传递和接收参数有多种实现方法，包括通过URL传递参数、通过表单传递参数、通过函数调用传递参数以及使用LocalStorage或SessionStorage传递参数。每种方法都有其适用的场景和优缺点。在实际项目中，例如在研发项目管理系统PingCode和通用项目协作软件Worktile中，这些方法都可以有效地用于在不同页面之间传递数据，提高项目的协作效率和用户体验。