使用JQuery向另一页面表单添加数据，需结合跨页面数据传递与DOM操作，可通过URL参数（如?data=value）或localStorage传递数据，目标页面通过$(document).ready()初始化后，用JQuery选择器定位表单元素（如$("#formId input")），再通过val()设置单值、append()添加选项或动态元素，若需跨域，可结合AJAX获取数据后填充表单，注意数据验证与XSS防护，核心步骤：数据传递→页面加载→元素定位→数据填充，实现跨页面表单数据动态交互。
使用jQuery实现跨页面表单数据传递：原理与实战指南
在Web开发中,跨页面数据传递是一项常见需求，例如从商品列表页跳转到详情页并预填充筛选条件，或从表单向关联表单传递默认值，jQuery作为经典的JavaScript库，凭借其简洁的语法和强大的DOM操作能力，能够高效实现这类功能，本文将详细介绍如何使用jQuery实现跨页面表单数据传递，涵盖核心原理、多种实现方式及完整代码示例。
核心原理：跨页面数据传递与DOM操作
要实现跨页面表单数据传递,本质需要解决两个核心问题：如何将数据从源页面传递到目标页面，以及如何在目标页面加载后使用jQuery操作表单元素填充数据。
跨页面数据传递方式
由于浏览器的同源策略限制,JavaScript无法直接跨页面操作DOM，因此需要借助以下中间方式传递数据：
-
URL参数：通过URL的查询字符串（
?key1=value1&key2=value2）传递少量数据，适合简单、非敏感信息传递。 -
localStorage/sessionStorage：通过浏览器本地存储传递数据，适合需要跨页面保持或传递较大数据量的场景，其中sessionStorage在页面关闭后失效，而localStorage长期有效。
-
Cookie：通过HTTP Cookie传递数据，适合需要服务端配合的场景，但需注意Cookie大小限制和安全性问题。
-
PostMessage API：适用于跨域通信，可在不同源的窗口间安全传递数据。
jQuery表单数据填充
目标页面加载完成后,通过jQuery选择器定位表单元素（如input、select、textarea等），再调用相应方法设置其值：
val()：设置输入框、选择框、文本域的值text()：设置文本内容html()：设置HTML内容attr()：设置属性值
实战实现：分步骤详解
下面以最常见的"URL参数传递"和"localStorage传递"为例，演示具体实现流程。
场景设定
假设有两个页面：
- 源页面（
source.html）：包含一个表单（用户名、年龄、爱好）和一个"跳转并传递数据"按钮。 - 目标页面（
target.html）：包含一个空白表单，需接收并显示源页面的数据。
通过URL参数传递数据（适合少量数据）
源页面（source.html）：收集数据并拼接URL
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">源页面 - 数据传递</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
form div { margin-bottom: 15px; }
label { display: inline-block; width: 80px; }
input { padding: 5px; }
button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
button:hover { background-color: #45a049; }
</style>
</head>
<body>
<h2>用户信息填写</h2>
<form id="sourceForm">
<div>
<label>用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
</div>
<div>
<label>年龄：</label>
<input type="number" id="age" name="age" min="1" max="120" placeholder="请输入年龄">
</div>
<div>
<label>爱好：</label>
<input type="text" id="hobby" name="hobby" placeholder="如：篮球,阅读（多个爱好用逗号分隔）">
</div>
<button type="button" id="transferBtn">跳转并传递数据</button>
</form>
<script>
$(document).ready(function() {
$("#transferBtn").click(function() {
// 1. 获取表单数据
let username = $("#username").val().trim();
let age = $("#age").val().trim();
let hobby = $("#hobby").val().trim();
// 2. 简单验证
if (!username) {
alert("请输入用户名");
return;
}
if (!age || isNaN(age) || age < 1 || age > 120) {
alert("请输入有效的年龄（1-120）");
return;
}
// 3. 拼接URL参数（需encodeURIComponent处理特殊字符）
let params = $.param({
username: encodeURIComponent(username),
age: encodeURIComponent(age),
hobby: encodeURIComponent(hobby)
});
// 4. 跳转到目标页面并携带参数
window.location.href = "target.html?" + params;
});
});
</script>
</body>
</html>
关键点：
- 使用
$.param()方法将对象自动转换为URL查询字符串，避免手动拼接 - 通过
encodeURIComponent()对参数值编码，防止特殊字符破坏URL结构 - 添加了基本的表单验证,提高用户体验
目标页面（target.html）：获取URL参数并填充表单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">目标页面 - 数据填充</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
form div { margin-bottom: 15px; }
label { display: inline-block; width: 80px; }
input { padding: 5px; width: 200px; }
.readonly { background-color: #f5f5f5; }
.back-btn { margin-top: 20px; }
</style>
</head>
<body>
<h2>接收到的用户信息</h2>
<form id="targetForm">
<div>
<label>用户名：</label>
<input type="text" id="targetUsername" class="readonly" readonly>
</div>
<div>
<label>年龄：</label>
<input type="number" id="targetAge" class="readonly" readonly>
</div>
<div>
<label>爱好：</label>
<input type="text" id="targetHobby" class="readonly" readonly>
</div>
<button type="button" class="back-btn" onclick="window.history.back()">返回上一页</button>
</form>
<script>
$(document).ready(function() {
// 1. 获取URL参数（封装为工具函数）
function getUrlParam(key) {
let url = window.location.search;
let params = new URLSearchParams(url);
return params.get(key); // 自动解码（无需decodeURIComponent）
}
// 2. 从URL获取数据并填充表单
let username = getUrlParam("username");
let age = getUrlParam("age");
let hobby = getUrlParam("hobby");
if (username) $("#targetUsername").val(decodeURIComponent(username));
if (age) $("#targetAge").val(de
