AJAX获取JSON数组后触发ReferenceError：变量未定义问题求助

我一眼就看出问题出在哪了——你在拼接按钮的onClick事件时，没有把字符串参数用引号包裹起来！

错误原因分析 #

当你执行这段代码时：

html+="Postplace: "+postplace+" Postnumber: "+postnumber+" <button onClick=alarm("+dataen[a]["poststed"]+")>Test</button><br>";

假设dataen[a]["poststed"]的值是"Bergen"，那么生成的HTML会是：

<button onClick=alarm(Bergen)>Test</button>

浏览器会把Bergen当成一个变量名，而你根本没定义过这个变量，自然就抛出ReferenceError了。

解决方案1：给字符串参数添加引号 #

你需要把参数用引号包裹，让浏览器识别它是字符串字面量。可以用转义的双引号，或者混合单双引号来拼接：

方法A：转义双引号

html += "Postplace: " + postplace + " Postnumber: " + postnumber + " <button onClick='alarm(\"" + postplace + "\")'>Test</button><br>";

方法B：使用ES6模板字符串（更推荐，可读性更高）

for (let a = 0; a < dataen.length; a++){
  const postnumber = dataen[a].postnr;
  const postplace = dataen[a].poststed;
  html += `Postplace: ${postplace} Postnumber: ${postnumber} <button onClick='alarm("${postplace}")'>Test</button><br>`;
}

解决方案2：使用事件委托（更安全、优雅） #

拼接内联事件不仅容易出错，还存在XSS风险（如果poststed包含特殊字符的话）。更推荐用事件委托的方式：

1. 修改循环中的HTML拼接，给按钮添加data-*属性存储数据：

for (let a = 0; a < dataen.length; a++){
  const postnumber = dataen[a].postnr;
  const postplace = dataen[a].poststed;
  html += `Postplace: ${postplace} Postnumber: ${postnumber} <button data-postplace="${postplace}">Test</button><br>`;
}

2. 在页面初始化时，给父元素绑定点击事件（事件委托）：

// 放在find函数外面，页面加载完成后执行
$(document).ready(function() {
  $("#respons2").on("click", "button", function() {
    const postplace = $(this).data("postplace");
    alarm(postplace);
  });
});

// 你的find函数保持不变（除了HTML拼接部分）
function find() {
  const url = "tjener-kode.php";
  $.get(url, function(data){
    let html = "";
    const dataen = JSON.parse(data);
    console.log(dataen);
    for (let a = 0; a < dataen.length; a++){
      const postnumber = dataen[a].postnr;
      const postplace = dataen[a].poststed;
      html += `Postplace: ${postplace} Postnumber: ${postnumber} <button data-postplace="${postplace}">Test</button><br>`;
    }
    $("#respons2").html(html);
  });
}

function alarm(postplace){
  alert("Hello. You clicked on "+postplace);
}

这种方式不仅避免了拼接内联事件的麻烦，还能动态处理后续添加的元素，安全性也更高。

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