使list可单击以将ajax请求加载到div中 [英] making list clickable to load ajax request into div
问题描述
如何在jquery中创建一个可点击列表，其中列表中的每个项目都是它自己的链接，不使用HTML只是jquery / ajax / json
How can I make a clickable list in jquery where each item in the list is it own link not using HTML just jquery/ajax/json
我需要制作jquery中的可点击列表。
I need to make a clickable list in jquery.
我需要做的是使任何用户点击列表项运行实际的AJAX请求。然后必须使用从该请求返回的数据来填充页面右侧的框。
what I need to do is to make it so that any user clicking on the list item runs an actual AJAX request. The data returned from that request must then be used to fill the box on the right side of the page.
我坚持使用我创建的点击功能和我我不确定接下来要做什么，当我运行页面时，people.json文件没有出现在页面上
I’m stuck on the on click function I create and i’m not sure what to do next and when I run the page the people.json file isnt appearing on the page
我的javascript
my 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
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中。
what the result should be is that by clicking the names on the list, i can make a ajax request and load the data of each url into the div.
推荐答案
构建人员列表并为每个 li 添加点击处理程序。这样的事情。
Build "people" list and add click handler to each li. Something like this.
'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中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
