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

我在尝试在页面上创建多个不同的对象时遇到了一些问题，这些对象都会向同一url发送get请求，但请求中的参数不同。服务器应该返回一个页面，但根据单击哪个对象发出请求，该页面包含不同的数据。从某种意义上说，这有点像是一个个人资料采摘者。比如，如果我点击第1个人的图片，它会将我带到他们的个人资料页面，但如果我点击第2个人的图片，它会将我带到第2个人的个人资料页面

每个人在我的数据库中都有一个唯一的Id，我可以在客户端javascript中访问该Id。单击person 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);
        }

//创建要附加到正文的行元素
var newRow=document.createElement（“div”）；
newRow.className=“行”；
//遍历返回的JSON对象数组
对于（i=0；i

---

我想在对loadProfile（）的调用中包含此人的Id，但我不确定如何添加。我是否应该尝试将persons Id附加到锚对象的href并发出这样的get请求？我使用express.js作为web服务器，使用jquery进行客户端请求，使用mongoDB作为数据库。任何帮助或建议都将不胜感激

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

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

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

到

然而，这似乎不是一个好方法，更好的方法是（因为您已经提到使用jQuery）

---

另外，您可以使用jQuery来创建元素，而不是老式的普通方式。

如果我正确理解了您的问题，您正在尝试将事件处理程序绑定到链接。这是您应该使用的DOM API—而不是分配

link.href='javascript:…'

您还应该注意创建这样的函数

总的来说，您应该有如下内容：

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));
}

函数加载配置文件（id）{
返回函数（）{
///在此处执行获取Web服务器的逻辑
}
}
对于（变量i=0；i

---

请注意，

loadProfile

功能现在是一个。

工作得很好，非常感谢！！为什么需要将请求作为函数返回到Web服务器，而不是在loadProfile（）中正常调用？@RyanO'Shea查看

addEventListener

的签名-它接受函数作为第二个参数。因此，如果您在这里正常地在

loadProfile

内部调用Web服务器，那么代码将立即执行（因为

loadProfile（）

在链接创建循环中被调用），而不是在链接单击时被回调。希望它有意义！

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

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));
}