javascript - 如何从 HTML 中选定项目的服务器检索数据

Question

我正在尝试创建一个网站，我需要检索所选项目预览的完整数据。

例如:亚马逊为您提供与您的搜索查询匹配的所有产品，然后您可以点击它们进入单个产品页面。 我也想做同样的事情。

到目前为止，我已经将我的搜索和项目的动态加载写入我的页面:

1) 我有一个 node.js 服务器，它使用包含元素列表(在我的例子中是医生)的 JSON 文件响应 get 请求

app.get('/doctors', function(req,res){
  var config = require('./doctor.json');
  config.forEach(function(dottore) {
    var tableName = dottore.name;
    console.log(tableName);
    });
  res.send(JSON.stringify(config));
})

2) 我从我的客户端 javascript 发出这样的请求:

$.get( '/doctors', function(data) {
$("<div class='row' id='dottori' ></div>").appendTo(".team");    
console.log(typeof data)

JSON.parse(data).map(addElement);    
 });

function addElement(doctor){
  console.log("Adding doctor");
  id=doctor.id;
  console.log(id);
  $("#dottori").append('<div class="col-md-4 ml-auto mr- 
              auto"><a href="./personaleGenerico.html" class="card card- 
        profile card-plain"><div class="btn btn-primary card-header card-header-image image-camminiamo"><img class="img" src="../assets/img/faces/4.jpg"></div><div class="card-body "><h3 class="card-title">'+doctor.name+'</h3><h4>Dott. in '+doctor.job+'</h4></div></a></div>');

}

而且效果很好。

我现在需要做的是单击我的医生的预览并加载页面 personaleGenerico.html，其中应包含有关该医生的完整信息。

我不知道如何将我服务器上的数据(这是一个包含所有医生的所有信息的 JSON)与我点击的元素相关联。

例如:如果我点击第一个叫“John”的医生，我将移动到 personaleGenerico.html 页面，其中包含该特定医生的信息(这些都在我的 JSON 文件中可用) )

Answer 1

您将需要另一个后端端点来执行不同的配置/数据库查询。为此，您需要通过 URL 参数从前端发送医生的 ID。参见:How to get a URL parameter in Express?

即:

app.get('/doctors/:id', function(req, res){
  var config = require('./doctor.json');
  const selectedDoctor = config.filter(function(doctor) {
      var tableName = doctor.name;
      console.log(tableName);
      return doctor.name === req.params.id
    });
  res.send(JSON.stringify(selectedDoctor));
})