jquery 页面跳转 form 参数-CFANZ编程社区

使用 jQuery 实现网页跳转与表单参数的传递

在现代网页开发中，表单是进行用户输入的重要方式。当用户填写完一个表单并提交后，如何让页面能够根据这些输入跳转到其他页面，并能将这些参数传递过去呢？在这方面，jQuery 提供了非常便利的方法。接下来我们将从基础开始，逐步实现一个完整的功能。

1. 什么是 jQuery？

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，使 HTML 文档操作、事件处理、动画效果以及 Ajax 交互变得更加简单。jQuery 是很多前端开发者的首选，因为它隐藏了许多浏览器之间的兼容性问题，并提供了简洁的 API。

2. 页面跳转的基本概念

页面跳转是指用户在浏览网页时，从一个网页转到另一个网页，这通常通过超链接或表单提交实现。在表单提交的过程中，我们可以将用户输入的参数发送到目标网页。

3. jQuery 实现页面跳转与参数传递

下面，我们将通过一个简单的示例来演示如何使用 jQuery 实现页面跳转，并将表单中的参数传递到目标页面。

3.1 HTML 表单结构

首先，我们需要一个简单的 HTML 表单，让用户输入一些信息：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单跳转示例</title>
    <script src="
</head>
<body>
    
    <h2>用户信息输入</h2>
    <form id="userForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <br><br>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" required>
        <br><br>
        <button type="submit">提交</button>
    </form>
    
    <script>
// jQuery 代码在这里
    </script>

</body>
</html>

3.2 添加 jQuery 代码

在 <script> 标签中，我们将添加代码以处理表单提交事件：

$(document).ready(function() {
    $('#userForm').on('submit', function(event) {
        event.preventDefault(); // 阻止默认的表单提交
        
        var name = $('#name').val(); // 获取用户输入的姓名
        var age = $('#age').val(); // 获取用户输入的年龄
        
        // 构建目标页面 URL，与参数
        var targetUrl = "target.html?name=" + encodeURIComponent(name) + "&age=" + encodeURIComponent(age);
        
        // 执行跳转
        window.location.href = targetUrl;
    });
});

3.3 目标页面的接收参数

在 target.html 页面，我们将从 URL 中获取参数并在页面中显示出来：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接收参数页面</title>
</head>
<body>
    
    <h2>接收到的用户信息</h2>
    <div id="output"></div>
    
    <script>
        // 获取 URL 参数
        function getQueryParam(param) {
            var urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(param);
        }
        
        var name = getQueryParam('name');
        var age = getQueryParam('age');
        
        // 显示用户信息
        document.getElementById('output').innerHTML = "姓名: " + name + "<br>年龄: " + age;
    </script>

</body>
</html>

4. 旅行图示例：用户填写表单的过程

在流程图部分，我们使用 mermaid 语法实现用户填写表单的旅行过程：

journey
    title 用户填写表单的过程
    section 用户填写信息
      用户访问表单: 5: 用户
      输入姓名: 4: 用户
      输入年龄: 4: 用户
    section 提交表单
      点击提交按钮: 5: 用户
      页面跳转: 5: 系统
    section 显示结果
      显示用户信息: 5: 系统