如何将JavaScript变量传入JSON，实现表单data-prefill属性填充？

你直接在HTML属性里写name是行不通的——HTML属性内容是静态字符串，浏览器不会把它当成JavaScript变量解析。得用JS动态生成符合要求的JSON字符串，再赋值给data-prefill属性，具体步骤如下：

完整代码示例 #

// 保留你原来的URL参数获取逻辑
const queryString = window.location.search;
console.log(queryString);
const urlParams = new URLSearchParams(queryString);
const name = urlParams.get('id'); // 建议用const替代var，更符合现代JS规范

// 1. 获取目标div元素
const reviewFormDiv = document.querySelector('.review-form');

// 2. 构建预填充数据对象
const prefillData = {
  firstName: name
};

// 3. 将对象转为标准JSON格式字符串
const prefillJson = JSON.stringify(prefillData);

// 4. 把JSON字符串赋值给data-prefill属性
reviewFormDiv.setAttribute('data-prefill', prefillJson);

额外注意事项 #

• 确保这段代码在页面DOM加载完成后执行，否则可能找不到目标div。可以把代码包裹在DOMContentLoaded事件监听里：

document.addEventListener('DOMContentLoaded', function() {
  // 上面的所有代码放在这里
});

• 如果URL中没有id参数，name会是null，生成的JSON会是{"firstName":null}。如果需要处理空值场景，可以添加判断逻辑，比如：

const prefillData = {
  firstName: name || '' // 为空时替换成空字符串
};

内容的提问来源于stack exchange，提问作者joelinit