Question

尝试在页面上创建多个不同的对象时遇到了麻烦，这些对象都会将get请求发送到相同的url，但请求中的参数不同。服务器应该返回一个页面，但是根据单击哪个对象发出请求，该页面具有不同的数据。在某种程度上，它就像个人资料选择器。就像如果我单击人员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);
        }

我想在调用loadProfile（）的过程中包含该人的ID，但是我不确定该怎么做。我是否应该尝试仅将人员ID附加到锚对象的href上并发出这样的get请求？我正在对Web服务器使用express.js，使用jquery进行客户端请求，并使用mongoDB作为我的数据库。任何帮助或建议，将不胜感激！

Answer 1

如果我正确理解了您的问题，则您正在尝试将事件处理程序绑定到链接。这是您应该用于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。

Answer 2

在您的情况下（如您所述），一种可能的解决方案是将id传递给loadProfile方法。像这样：

link.href = 'javascript:loadProfile(' + var_with_id ')'; // where var_with_id is the id that you want to pass

，然后更改loadProfile函数以获取参数并使用它（我们也需要查看该函数以提供更多帮助）：

function loadProfile() { // or similar

到

function loadProfile(id) { // or similar, and then use id in the code

但是，这似乎不是一个好方法，更好的方法是bind a click event handler（因为您已经提到过使用jQuery）。

此外，您可以使用jQuery来创建元素，而不必使用老式的香草方式。

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

2 个答案: