使用 JSON.stringify() 将数据传递给 onclick 函数

在动态生成 HTML 内容时，经常需要将 JavaScript 对象数据传递给元素的事件处理函数，例如 onclick。直接将对象嵌入到模板字符串中可能会导致错误，因为 JavaScript 会尝试将对象转换为字符串，结果通常是 [object Object]。为了解决这个问题，可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串，然后再将其传递给 onclick 函数。

以下是一个示例，展示了如何从 JSON 文件获取歌曲数据，并使用 JSON.stringify() 将歌曲对象传递给 onclick 事件处理函数：

async function loadSongs() {
  const res = await fetch('./songApi/songs.json');
  const fetchedSongs = await res.json();
  let list = "";

  fetchedSongs.map((song) => {
    list += `
      <div class="songitem" style="background:${song.background} ;">
        <img src=${song.coverpath} alt="${song.SongName}">
        <span class="name">${song.SongName}</span>
        <span class="songlistplay">
          <span class="songTime">${song.time}</span>
          <i class="far fa-play-circle songitemplay" onclick='makeAllPlays(${JSON.stringify(song)})'></i>
        </span>
      </div>`;
  });

  // 将生成的 HTML 插入到页面中
  document.getElementById('songListContainer').innerHTML = list;
}

// 假设的 makeAllPlays 函数
function makeAllPlays(song) {
  console.log("歌曲信息:", song);
  // 在这里处理歌曲数据，例如播放歌曲
}

// 页面加载完成后调用 loadSongs 函数
window.onload = loadSongs;

代码解释：

1. JSON.stringify(song): 这会将 song 对象转换为 JSON 字符串。例如，如果 song 是 { SongName: "我的歌", time: "3:30" }，那么 JSON.stringify(song) 的结果将是 {"SongName":"我的歌","time":"3:30"}。

2. onclick='makeAllPlays(${JSON.stringify(song)})': 这会将 JSON 字符串作为参数传递给 makeAllPlays 函数。注意，onclick 属性的值需要用单引号括起来，因为 JSON 字符串本身使用双引号。

   

   怪兽AI数字人

   数字人短视频创作，数字人直播，实时驱动数字人

   44

   查看详情

3. makeAllPlays(song): 在 makeAllPlays 函数中，song 参数将是 JSON 字符串解析后的 JavaScript 对象。 你可以直接访问对象的属性，例如 song.SongName 和 song.time。

注意事项：

• 单引号和双引号： 务必注意 onclick 属性值使用单引号，JSON 字符串使用双引号，避免语法错误。
• 数据大小： 传递大型对象可能会影响性能。如果只需要传递部分数据，可以只选择需要的属性进行传递。
• 安全性： 如果 song 对象包含用户输入的数据，请务必进行适当的转义，以防止跨站脚本攻击 (XSS)。

总结：

使用 JSON.stringify() 可以安全有效地将 JavaScript 对象传递给 HTML 元素的 onclick 事件处理函数。这种方法避免了直接嵌入对象导致的错误，并确保数据在事件触发时能够正确传递。在处理动态生成的 HTML 内容时，这是一个非常有用的技巧。

以上就是使用 JSON.stringify() 将数据传递给 onclick 函数的详细内容，更多请关注php中文网其它相关文章！