javascript - 如何创建多个对象，每个对象加载相同的页面但在 javascript 中具有不同的数据？

Question

我在尝试在页面上创建多个不同的对象时遇到了一些麻烦，这些对象都会向相同的 url 发送 get 请求，但在请求中使用不同的参数。服务器应该返回一个页面，但根据单击哪个对象发出请求，该页面具有不同的数据。在某种程度上，它有点像配置文件选择器。例如，如果我点击人 1 的照片，它会将我带到他们的个人资料页面，但如果我点击人 2 的照片，它会将我带到人 2 的个人资料页面。

每个人在我的数据库中都有一个与他们的个人资料相关联的唯一 ID，我可以在我的客户端 javascript 中访问它。我想在单击某人 x 的个人资料图片时将该 ID 作为我对服务器的请求的一部分。

下面是我到目前为止的客户端代码。

//Create row element to be appended to the body
        var newRow = document.createElement("div");
        newRow.className = "row";

        //Iterate through the returned array of JSON objects
        for (i = 0; i < response.length; i++)
        {
        //Create new columns to be appended to the row
          var newCol = document.createElement("div");
          newCol.className = "col-lg-4 col-sm-6 text-center mb-4";

          //Create new image object from data in response
          var image = new Image();
          image.src = '/uploads/' + response[i].pic;
          image.className = "rounded-circle d-block mx-auto patient-img";

          var patId = response[i].Id

          //Create new anchor object
          var link = document.createElement("a");
          link.href = 'javascript:loadProfile()'; //When clicked will call function that sends get request to /profile

          link.appendChild(image);

          newCol.appendChild(link);    

          //Get patient name from response
          var patName = document.createElement("h3");

          patName.innerHTML = response[i].name;

          newCol.appendChild(patName);

          //Append the full column to the row
          newRow.appendChild(newCol);
        }

我想将此人的 ID 作为调用 loadProfile() 的一部分，但我不确定如何操作。我是否应该尝试将人员 ID 附加到 anchor 对象的 href 并发出这样的获取请求？我使用 express.js 作为 Web 服务器，使用 jquery 来发出客户端请求，使用 mongoDB 作为我的数据库。任何帮助或建议将不胜感激!!

Answer 1

如果我正确理解了您的问题，那么您正在尝试将事件处理程序绑定(bind)到链接。这是您应该用于 EventTarget.addEventListener 的 DOM API - 而不是分配 link.href = 'javascript:...'。

您还应该注意创建此类函数 within a loop

总的来说你应该有这样的东西:

function loadProfile(id) {
  return function() {
    /// do logic for fetching webserver here
  }
}

for (var i = 0; i < response.length; i++) {
  /// other code
  var link = document.createElement("a");
  link.addEventListener('click', loadProfile(response[i].Id));
}

请注意，loadProfile 函数现在是一个 higher-order function .