Как получить данные с сервера выбранного элемента в HTML
Я пытаюсь создать веб-сайт, и мне нужно получить полные данные предварительного просмотра выбранного элемента.
Например: Amazon предоставляет вам все продукты, соответствующие вашему поисковому запросу, а затем вы можете щелкнуть по ним, чтобы перейти на страницу одного продукта. Я хотел бы сделать то же самое.
Пока что я уже написал свой поиск и динамическую загрузку товаров на свою страницу:
1) У меня есть сервер node.js, который отвечает на запрос на получение с помощью файла JSON, содержащего список элементов (в моем случае, врачей)
app.get('/doctors', function(req,res){
var config = require('./doctor.json');
config.forEach(function(dottore) {
var tableName = dottore.name;
console.info(tableName);
});
res.send(JSON.stringify(config));
})
2) Я делаю запрос из своего javascript на стороне клиента следующим образом:
$.get( '/doctors', function(data) {
$("<div class='row' id='dottori' ></div>").appendTo(".team");
console.info(typeof data)
JSON.parse(data).map(addElement);
});
function addElement(doctor){
console.info("Adding doctor");
id=doctor.id;
console.info(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, содержащий всю информацию обо всех врачах) с элементом, который я щелкнул.
Например: если я нажму на первого врача по имени «Джон», я перейду на страницу personaleGenerico.html, заполненную информацией об этом конкретном докторе (все они доступны в моем файле JSON).
Да это правильно!
Для этого существует большое количество способов. Пожалуй, самый простой - добавить в серверную часть маршрут, который позволит вам выбрать конкретного врача по идентификатору. Затем назовите свою страницу, например, personaleGenerico.html? Id = 1. Используйте этот параметр id, передайте его новому внутреннему маршруту через ajax и используйте эти данные по своему усмотрению. Объяснение того, как все это сделать в ответе, заняло бы слишком много времени. Если вы можете немного сузить свой вопрос, это поможет найти ответы.
Извините, если я оставил вопрос слишком "открытым". Я новичок в этой области, не могли бы вы мне посоветовать, как улучшить свой вопрос, чтобы он стал более ясным и узким? На самом деле я не знаю, что мне конкретно нужно для решения моей проблемы, поэтому мой вопрос немного «широкий». Кстати, ваше решение актуально, я знаю, как его решить, спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Думаю, есть два основных пути.
1 - рендеринг на сервере
Вы можете использовать какой-нибудь генератор html, например мопс, и ответ вашего сервера с полной страницей html со всей информацией.
2 - рендеринг на клиенте
Используйте вызов AJAX для получения информации json, а затем поместите данные в элементы html. Существует множество фреймворков для динамического создания html-элементов из данных: vuejs, угловатый, ... Однако вы можете сделать это также в ванильном javascript, создав html-элемент с данными и вставив их в DOM.
Из того, что вы говорите, я думаю, вам нужен рендеринг на сервере, если вы используете expressjs, см. этот пример
РЕДАКТИРОВАТЬ
Редактировать на основе ответа на комментарий.
Предположим, что у вашего элемента данных есть идентификатор. Вам нужно создать такой маршрут на сервере:
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);
});
вы также должны вести дела, когда врача не существует. Затем вы можете вызвать этот маршрут для получения данных.
Спасибо за ответ, я знаю, как «протолкнуть» данные с сервера в свой HTML. Проблема в том, что я не знаю, как сказать своему серверу, какого врача мой клиент хочет загрузить! Чтобы было понятнее: я знаю, как заполнить мою общую страницу данными, которые мне нужны, но я не знаю, как получить правильные данные, связанные с доктором, которого я выбрал на предыдущей странице. Надеюсь, теперь стало понятнее
вам понадобится другая конечная точка сервера, которая выполняет другой запрос конфигурации / БД. Для этого вам нужно будет отправить идентификатор врача из внешнего интерфейса через параметры URL. см .: Как получить параметр URL в Express?
то есть:
app.get('/doctors/:id', function(req, res){
var config = require('./doctor.json');
const selectedDoctor = config.filter(function(doctor) {
var tableName = doctor.name;
console.info(tableName);
return doctor.name === req.params.id
});
res.send(JSON.stringify(selectedDoctor));
})
Спасибо, это решило много проблем. И последний вопрос: как мне узнать идентификатор выбранного врача? Я знаю, как получить его, когда нажимаю на элемент, но правильно ли добавлять его в свой HTML, а затем принимать значение идентификатора в моем <div>? Я не совсем понимаю, где мне «хранить» id первого запроса
Будет состояние внешнего интерфейса и состояние внутреннего интерфейса. Итак, на интерфейсе у вас будет идентификатор, который может быть тегом html. Таким образом, вам нужно иметь id: 'someid' в вашем файле config.js для каждого элемента. Затем, когда вы получите ВСЕ своих врачей, вы заполните каждый элемент врача на странице их данными И и идентификатором (который может быть сохранен в теге html id), затем в обработчике onclick для этого элемента убедитесь, что вы получили этот идентификатор и отправьте его как параметр запроса. Извините за задержку, обедать не было. Если это помогло, обязательно проголосуйте и отметьте как ответ для других!
Думаю, я понимаю ваш вопрос, но не уверен на 100%. Является ли "personaleGenerico.html" общей страницей, которую вы хотите заполнить информацией, в зависимости от того, на какого врача нажали?