AJAX / JSON с возможным событием Jquery - PullRequest
Новая
       20

AJAX / JSON с возможным событием Jquery

0 голосов
/ 02 мая 2018

Я пытаюсь сделать так, чтобы, когда пользователь нажимал на имя человека в списке, поле данных в правой части экрана заполнялось описанием из моего файла JSON.

Я хочу сделать так, чтобы при щелчке по любому элементу списка выполнялся фактический запрос AJAX. Данные, возвращаемые из этого запроса, должны затем использоваться для заполнения поля в правой части страницы.

Буду очень признателен за любые идеи или предыдущие темы, к которым вы можете привести меня. Я перепробовал много вещей и не смог.

Можно ли как-нибудь сделать каждое слово в списке активируемым элементом? Может быть со слушателем событий?

Спасибо, Вот мой код, который состоит из 3 отдельных файлов, которые являются "HTML-файл, файл Javascript и файл JSON" 

<!DOCTYPE html>
<hmtl lang="en">
    <head>
        <meta charset="utf-8" />
        <title>AJAX</title>
        <link rel="stylesheet" href="styles.css" type="text/css" />
        <script src="jquery.js" type="application/javascript"></script>
        <script src="ajax.js" type="application/javascript"></script>
    </head>
    <body>
      <div id="loaded-data"></div>
      <div id="result-box"></div>
    </body>
</hmtl>

/* ajax.javascript file */
'use strict';

$(function() {

    let request = $.ajax({
      method: 'GET',
      url : 'people.json',
      dataType: 'json',
    });

    request.done(function(data) {
      let list = data.body.list;
      let resultBox = $('#result-box');
      let unorderedList = $('<ul>');
      resultBox.append(unorderedList);
      console.log(data);


      for (let person of list) {
        let listItem = $('<li>');
        listItem.text(person.name);
        listItem.attr('data-url', person.links[0].href);
        unorderedList.append(listItem);
      }

      });

      request.fail(function(response) {
      console.log('ERROR: ' + response.statusText);

      });
    });

{
"links":[{"rel":"self","href":"http://www.philart.net/api/people.json"},{"rel":"parent","href":"http://www.philart.net/api.json"}],
"head":{"title":"People","type":"listnav"},
"body":{
"list":[
{"name":"Adam","links":[{"rel":"self","href":"http://www.philart.net/api/people/325.json"}]},
{"name":"Abigail Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/157.json"}]},
{"name":"John Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/410.json"}]},
{"name":"Samuel Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/439.json"}]},
{"name":"Lin Zexu","links":[{"rel":"self","href":"http://www.philart.net/api/people/347.json"}]},
{"name":"James A. Zimble","links":[{"rel":"self","href":"http://www.philart.net/api/people/345.json"}]},
{"name":"Doris Zimmerman","links":[{"rel":"self","href":"http://www.philart.net/api/people/171.json"}]}
]
}
}

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Как указано Дуг Нгуен , вам понадобится обработчик событий. 

let displayPersonDescription = person => {
   let html = '';
   html += person.links.reduce((a, c) => {
      //put your formating logic in here
      //i.e. 
     return a + `<a href="${c.href}">${c.href}</a>`;
   }, '');

    html += person.body.art.reduce((a, c) => {
      //additional formating logic here
    }, '');
// continue this pattern for all the sections you want to include
//...
// Finally load the data into the loaded-data div
   $("#loaded-data").html(html);
}

Вот обновленный раздел вашего кода для реализации хандлера 

for (let person of list) {

    //clear the loaded data div
    $(#loaded-data).html('');

    let listItem = $('<li>');
    listItem.text(person.name);
    listItem.attr('data-url', person.links[0].href);
    unorderedList.append(listItem);
    listItem.on('click', function () {
        $.ajax({
                method: 'GET',
                url: this.dataSet.url,
                dataType: 'json',
            })
            .done(displayPersonDescription(person))
            .fail(failureData => console.log(`Error: ${JSON.stringify(failureData)}`));
    });
}
0 голосов
/ 02 мая 2018

Вам просто нужен такой обработчик: 

let displayPersonData = (person) => {
  console.log(person)
}

Затем при рендеринге списка людей вы добавляете прослушиватель событий, как показано ниже: 

for (let person of list) {
    let listItem = $('<li>');
    listItem.text(person.name);
    listItem.attr('data-url', person.links[0].href);
    unorderedList.append(listItem);

    listItem.on('click', () => {
      displayPersonData(person)
    });
}

Вы можете добавить класс к тегам <li>, чтобы они действовали как гиперссылки. И настроить displayPersonData, чтобы делать то, что вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...