修改

Question

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

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

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

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

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）与我点击过的元素相关联。

例如：如果我点击第一个叫＃＆＃34; John＆＃34;的医生，我将移动到填充了该特定医生信息的页面personaleGenerico.html（我的JSON文件中都可以使用该信息））

Answer 1

我认为有两种主要方式。

1 - 在服务器上呈现

你可以使用像pug这样的html生成器，以及包含所有信息的完整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?

即：

// component.scss

header {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1001;  
  &.fixed {
    // Styles for a fixed header
  }
}

main {
    padding-top: 170px; // Your header height + some slack
}

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

2 个答案:

1 - 在服务器上呈现

2 - 在客户端上呈现

修改