使list可單擊以將ajax請求加載到div中

Question

如何在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中。

Answer 1

構建“人員”列表並為每個li添加click處理程序。 像這樣的東西。

 '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>

使list可單擊以將ajax請求加載到div中

問題描述

1 個解決方案

解決方案1
0 2019-04-13 04:21:54

使list可單擊以將ajax請求加載到div中

問題描述

1 個解決方案

解決方案1 0 2019-04-13 04:21:54

解決方案1
0 2019-04-13 04:21:54