Как создать несколько объектов, каждый из которых загружает одну и ту же страницу, но с разными данными в JavaScript?

1

У меня возникли некоторые проблемы при попытке создать на странице несколько разных объектов, которые будут отправлять запрос 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 в качестве базы данных. Любая помощь или совет будет принята с благодарностью!

Теги:
function
dom-events

2 ответа

2
Лучший ответ

Если я правильно понял ваш вопрос, вы пытаетесь привязать обработчики событий к ссылкам. Здесь 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 теперь является функцией более высокого порядка.

  • 0
    Работал отлично, большое спасибо! Почему было необходимо возвращать запрос к веб-серверу как функцию вместо обычного вызова в loadProfile ()?
  • 0
    @ RyanO'Shea Посмотрите на сигнатуру addEventListener - она принимает функцию в качестве второго аргумента. Таким образом, если вы будете вызывать веб-сервер обычно внутри loadProfile , код будет выполнен немедленно (потому что loadProfile() вызывается в цикле создания ссылки), а не как обратный вызов при щелчке ссылки. Надеюсь, это имеет смысл!
0

Одним из возможных решений в вашем случае (как вы упомянули) будет передача идентификатора методу 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 для создания элементов вместо старого стиля ванили.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню