如何使用JSON动态生成HTML的href链接实现WhatsApp聊天跳转？

实现方案 #

你只需修改appendData函数中的DOM生成逻辑，将读取到的手机号拼接为WhatsApp跳转链接即可，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp Chat Software</title>
</head>
<body>
<div id="myData"></div>
<script>
fetch('number.json')
.then(function (response) {
  return response.json();
})
.then(function (data) {
  appendData(data);
})
.catch(function (err) {
  console.log('error: ' + err);
});

function appendData(data) {
  var mainContainer = document.getElementById("myData");
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    // 核心修改：拼接生成可点击的WhatsApp跳转链接
    div.innerHTML = `
      <p>Mobile No: ${data[i].MobileNo}</p>
      <a href="https://wa.me/${data[i].MobileNo}" target="_blank">open chat</a>
      <hr>
    `;
    mainContainer.appendChild(div);
  }
}
</script>
</body>
</html>

生效说明 #

• 原有number.json文件无需修改，后续新增号码只需在JSON数组中按格式添加对应对象，前端加载时会自动生成对应可点击链接
• 点击open chat按钮会自动跳转到对应号码的WhatsApp聊天窗口，新窗口打开不会影响当前页面

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