У меня возникли некоторые проблемы при попытке создать на странице несколько разных объектов, которые будут отправлять запрос get на один и тот же URL-адрес, но с разными параметрами в запросе. Сервер должен вернуть страницу, но с другими данными, основанными на том, какой объект был нажат, чтобы сделать запрос. Это своего рода подборщик профилей. Например, если я нажму на изображение человека 1, оно приведет меня на страницу их профиля, но если я нажму на изображение человека 2, оно перейдет на страницу профиля человека 2.
У каждого человека есть уникальный идентификатор, связанный с его профилем в моей базе данных, к которому у меня есть доступ в моем клиентском JavaScript. Я хочу включить этот идентификатор в часть моего запроса к серверу при нажатии на изображение профиля пользователя x.
Ниже приведен код на стороне клиента, который у меня есть.
//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);
}
Я хочу включить идентификатор человека как часть моего вызова loadProfile(), но я не уверен, как это сделать. Должен ли я попытаться просто добавить Id лиц к href объекта привязки и сделать запрос get подобным образом? Я использую express.js для веб-сервера, jquery для выполнения запросов на стороне клиента и mongoDB в качестве базы данных. Любая помощь или совет будет принята с благодарностью!
Если я правильно понял ваш вопрос, вы пытаетесь привязать обработчики событий к ссылкам. Здесь DOM API, который вы должны использовать для этого EventTarget.addEventListener
- вместо назначения 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));
}
Обратите внимание, что функция loadProfile
теперь является функцией более высокого порядка.
Одним из возможных решений в вашем случае (как вы упомянули) будет передача идентификатора методу loadProfile. Что-то вроде:
link.href = 'javascript:loadProfile(' + var_with_id ')'; // where var_with_id is the id that you want to pass
а затем измените функцию loadProfile, чтобы получить параметр и использовать его (нам нужно было бы также увидеть эту функцию, чтобы помочь больше):
function loadProfile() { // or similar
в
function loadProfile(id) { // or similar, and then use id in the code
Однако это не кажется хорошим способом сделать это, лучше было бы связать обработчик события щелчка (так как вы уже упоминали об использовании jQuery).
Кроме того, вы можете использовать jQuery для создания элементов вместо старого стиля ванили.
addEventListener
- она принимает функцию в качестве второго аргумента. Таким образом, если вы будете вызывать веб-сервер обычно внутриloadProfile
, код будет выполнен немедленно (потому чтоloadProfile()
вызывается в цикле создания ссылки), а не как обратный вызов при щелчке ссылки. Надеюсь, это имеет смысл!