Question

如何在jquery中创建一个可单击的列表，其中列表中的每个项目都是其自己的链接，而不仅仅是使用jquery / ajax / json

我需要在jquery中列出一个可点击的列表。

我需要做的是使任何单击列表项的用户都可以运行实际的AJAX请求。然后必须使用该请求返回的数据来填充页面右侧的框。

我被创建的on click函数卡住了，我不确定下一步该怎么做，当我运行该页面时，该页面上没有出现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中。

Answer 1

构建“人员”列表，并将avproxy@ubuntu:~$ sudo python mtrpacket.py File "mtrpacket.py", line 4 async def trace(): ^ SyntaxError: invalid syntax处理程序添加到每个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;
}

使列表可点击以将Ajax请求加载到div

1 个答案: