сделать список кликабельным для загрузки ajax-запроса в div - PullRequest
Новая
       2

сделать список кликабельным для загрузки ajax-запроса в div

0 голосов
/ 13 апреля 2019

Как мне создать интерактивный список в jquery, где каждый элемент списка - это собственная ссылка, не использующая HTML, просто jquery / ajax / json

Мне нужно создать интерактивный список в jquery.

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

Я застрял в созданной мной функции нажатия, и я не уверен, что делать дальше икогда я запускаю страницу, файл people.json не появляется на странице

мой javascript 

'use strict';

$(function() {

$('#resultBox').click(function() {
  let url = $(this).data('url');
  makeAjaxRequest(url);
});


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

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

        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);
    });


}
});

people.js 

{
  "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"
      }
      ]
    }

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link href="styles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="jquery.js" charset="utf-8"></script>
  <script type="text/javascript" src="ajax.js" charset="utf-8"></script>
  <title>AJAX</title>
</head>

<body>
  <div id="loaded-data"></div>
  <a href="#">
    <div id="result-box">
      <a></div>





</body>

</html>

CSS 

body {
  font-family: sans-serif;
}

#loaded-data {
  width: 25%;
  height: 50%;
  overflow: scroll;
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: silver;
  padding: 30px;

}

результат должен быть следующим: щелкнув по именам в списке, я могу сделать ajax-запрос и загрузить данные каждого URL в div.

1 Ответ

0 голосов
/ 13 апреля 2019

Создайте список людей и добавьте обработчик click к каждому li.Как то так. 

'use strict';
$(function() {
  $('#a-load').click(function(e) {
    e.preventDefault();
    let url = $(this).data('url');
    makeAjaxRequest(url);
  });

  function makeAjaxRequest(url) {
    $.ajax({
        url: url,
        method: 'GET'
      })
      .done(function(data) {
        let list = data.body.list;
        let resultBox = $('#result-box');
        let unorderedList = $('<ul>');
        resultBox.append(unorderedList);
        list.forEach(function(el) {
          $('<li />').html(el.name)
            //.data('url', el.links[0].href) //no need
            .click(function() {// use it in closure
              loadDetails(el.links[0].href);
            })
            .appendTo(unorderedList);
        });
      })
      .fail(function(response) {
        conslole.log(response.status);
      });
  }

  function loadDetails(url) {
    //console.log(url);
    //make ajax request and fill loaded-data
    $.ajax({
        url: url,
        method: 'GET'
      })
      .done(function(data) {
        let resultBox = $('#loaded-data').empty();
        data.body.art.forEach(function(el) {
          //console.log(el.title);
          $('<h2 />').html(el.title.display)
            .appendTo(resultBox);
          //process other things
        });
      })
      .fail(function(response) {
        conslole.log(response.status);
      });
  }
});
body {
  font-family: sans-serif;
}

#loaded-data {
  width: 25%;
  height: 50%;
  overflow-y: scroll;
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: silver;
  padding: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="loaded-data"></div>
<a id="a-load" href="#" data-url="http://www.philart.net/api/people.json">People</a>
<div id="result-box">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...