jquery 父页面向子页面传值

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 Web 开发中，经常需要在父页面和子页面之间传递数据。jQuery 提供了多种方法来实现这一点。

优势

简化代码：jQuery 的 API 设计简洁，使得代码更加易读和维护。
跨浏览器兼容性：jQuery 处理了大部分浏览器的兼容性问题，开发者可以更专注于业务逻辑。
丰富的插件支持：jQuery 拥有大量的插件库，可以轻松实现各种功能。

类型

通过 URL 参数传递：将数据作为 URL 参数附加到子页面的 URL 上。
通过 HTML 元素传递：在父页面中创建一个隐藏的 HTML 元素，将数据存储在其中，然后在子页面中读取这些数据。
通过 JavaScript 全局变量传递：在父页面中定义一个全局变量，然后在子页面中读取这个变量。
通过 Ajax 传递：使用 jQuery 的 Ajax 方法在父页面和子页面之间传递数据。

应用场景

表单数据传递：在用户提交表单时，将表单数据传递到子页面进行处理。
动态内容加载：在父页面中加载子页面的内容，并传递一些初始化数据。
会话管理：在不同的页面之间传递用户会话信息。

示例代码

通过 URL 参数传递

父页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <a href="child.html?name=John&age=30">Go to Child Page</a>
</body>
</html>

子页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var urlParams = new URLSearchParams(window.location.search);
            var name = urlParams.get('name');
            var age = urlParams.get('age');
            console.log('Name: ' + name + ', Age: ' + age);
        });
    </script>
</body>
</html>

通过 HTML 元素传递

父页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="hiddenData" style="display:none;">
        <input type="hidden" name="name" value="John">
        <input type="hidden" name="age" value="30">
    </div>
    <iframe id="childFrame" src="child.html"></iframe>
    <script>
        $('#childFrame').on('load', function() {
            var data = $('#hiddenData').html();
            $('#childFrame').contents().find('body').html(data);
        });
    </script>
</body>
</html>

子页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function() {
            var name = $('input[name="name"]').val();
            var age = $('input[name="age"]').val();
            console.log('Name: ' + name + ', Age: ' + age);
        });
    </script>
</body>
</html>