如何在可复用AJAX基础函数中正确调用外部传入变量？

你已经在尝试实现代码复用，这个思路非常棒！不过你的代码里有几个小细节出错了，导致传参后无法正常工作，咱们一步步来修复：

问题核心分析 #

你的代码存在三个关键问题：

• ajaxBase函数没有定义接收参数的入口，外部传入的值根本没被函数捕获到
• 对象属性访问的语法错误：response.[fname]是无效写法，方括号访问属性不需要加.
• 函数调用时的参数传递方式不对，同时HTML里还有个按钮事件的拼写错误

修正后的完整代码 #

1. 修正后的Index.js #

/************************************/
/* Ajax base to fetch external json */
/************************************/
// 给ajaxBase定义参数，接收要访问的属性名和目标元素ID
function ajaxBase(propertyName, targetElementId) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(xhttp.responseText);
      // 使用方括号语法访问动态属性，注意不要加.
      document.getElementById(targetElementId).innerHTML = response[propertyName];
    }
  };
  xhttp.open("GET", "index.json", true);
  xhttp.send();
}

function changeFirstName() {
  // 直接传递属性名和目标元素ID
  ajaxBase("firstName", "boxOne");
}

function changeLastName() {
  // 直接传递属性名和目标元素ID
  ajaxBase("lastName", "boxTwo");
}

2. 修正后的Index.html（修复按钮事件拼写错误） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <title>Document</title>
</head>
<body>
  <button type="button" name="button" onclick="changeFirstName()">Change first-Name</button>
  <!-- 修复了changeLasttName的拼写错误，去掉多余的t -->
  <button type="button" name="button" onclick="changeLastName()">Change last-Name</button>
  <div id="boxOne" class="boxOne">First-Name[placeholder]</div>
  <div id="boxTwo" class="boxTwo">Last-Name[placeholder]</div>
  <script src="index.js"></script>
</body>
</html>

关键知识点说明 #

1. 函数参数定义：要让函数接收外部值，必须在声明函数时明确参数，比如function ajaxBase(propertyName, targetElementId)，这样调用时传入的内容才会被函数接收并使用。
2. 对象属性的动态访问：
   • 如果属性名是固定字符串，用.语法：response.firstName
   • 如果属性名是变量，必须用方括号语法：response[propertyName]，你的原始代码里加了.是语法错误。
3. 正确传递参数：调用函数时直接传值即可，不需要写成fname = "firstName"，这种写法是在全局作用域赋值，不是传递参数。

这样修改后，你的AJAX基础函数就可以灵活接收外部变量，完美实现代码复用啦！

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