如何从 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

我认为主要有两种方式。

1 - 在服务器上渲染

您可以使用一些 html 生成器，例如 pug，并使用包含所有信息的完整 html 页面的服务器响应。

2 - 在客户端渲染

使用 AJAX 调用获取 json 信息，然后将数据放入 html 元素中。 有很多框架可以从数据中动态创建 html 元素：vuejs，angular，... 但是，您也可以在 vanilla javascript 中使用数据创建 html 元素并将它们注入到 DOM 中。

从你所说的我认为你想要在服务器上进行渲染，如果你使用 expressjs，请参阅this example

编辑

根据评论回复进行编辑。

假设您的数据项具有标识符。 你必须像这样在服务器上创建一个路由：

app.get('/doctor/:id', function(req, res){
    const doctorId = req.params.id;
    const doctors = require('./doctor.json');
    // I assume doctors is an Array
    const doctor = doctors.find(item => {
        return item.id === doctorId;
    });
    // you can response directly in JSON not need stringify/parse
    res.json(doctor);
});

您还处理了医生不存在的情况。 然后就可以调用这个路由来获取数据了。

Answer 2

您将需要另一个执行不同配置/数据库查询的后端端点。为此，您需要通过 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));
})