使用jquery ajax从url加载json文件的问题
Posted
技术标签:
【中文标题】使用jquery ajax从url加载json文件的问题【英文标题】：Problem with loading json file from url using jquery ajax 【发布时间】：2019-06-08 22:07:23 【问题描述】：所以这是我写的代码，我的任务是这样的： 我有来自这里的 json 文件：http://ergast.com/api/f1/+SEASON+/drivers.json 有两个季节：2016 年和 2017 年，所以我需要相应的两个 json 文件。 我必须列出三个清单。 第一个应该包含 2016 赛季的 json 文件，所以，http://ergast.com/api/f1/2016/drivers.json 并且应该只包含名字和姓氏 第二个应该包含 2017 赛季的 json 文件，所以 http://ergast.com/api/f1/2017/drivers.json 并且还应该包含名字和姓氏 第三个列表应该包含我最喜欢的驱动程序，所以它需要是可排序的用户界面，这样我就可以拖放到那里，反之亦然，当第三个列表中有人时，我的意思是名字和姓氏，然后点击整个名字应该有额外的信息，比如数字、出生日期、国籍……我是用 jquery ui 工具提示做的。 工具提示正在工作，但是当我单击第二个选项卡时，我无法返回第一个选项卡 请帮忙！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<title>Formula 1</title>
<script>
function getEntries(u,l)
$.ajax(
url: u,
dataType: "jsonp",
success: function (data)
$.each(data.Drivers, function (i,item)
var name = item.givenName;
var surname = item.familyName;
var num = item.permanentNumber;
var date = item.dateOfBirth;
var nationality = item.nationality;
var strana = item.url;
l.append("<div class='container2'><ol><li>Name: '+name+', Surname: '+surname+'</li></ol>");
);
);
$(document).ready(function ()
var u1 = "http://ergast.com/api/f1/2016/drivers.json";
var u2 = "http://ergast.com/api/f1/2017/drivers.json";
var l1 = $('#list1');
var l2 = $('#list2');
getEntries(u1,l1);
$("#tabs").tabs(
beforeActivate: function (uevenet,ui)
if(ui.newTab.index()==0)
if($("#list1 li").size()==0)
getEntries(u1,l1);
else if(ui.newTab.index()==1)
if($("#list2 li").size == 0)
getEntries(u2,l2);
);
$("#list3").sortable();
$( "#list1" ).sortable(
connectWith: "#list3"
);
$( "#list2" ).sortable(
connectWith: "#list3"
);
$( "#list1, #list2, #list3" ).disableSelection();
$(document).tooltip(
items: "#list3 li, #list2 li, #list1 li",
content: function()
var el = $(this);
var br = el.attr("num");
var datum = el.attr("date");
var nacionalnost = el.attr("nationality");
var link = el.attr("strana");
return "Number of driver: " + br +
"Datum na raganje" + datum +
"Nacionalnost" + nacionalnost +
"Url do vozac" + link;
);
)
</script>
<style>
.container
float:left;
margin:20px;
padding: 5px;
.container1
float:right;
padding: 5px;
.container2
width: 500px;
.li:nth-child(odd) background: white;
.li:nth-child(even) background: lightblue;
.container
border-left: 1px lightgray solid;
#list1, #list2, #list3
list-style-type: none;
.row-selected
background:lightblue;
</style>
</head>
<body>
<div id="tabs" style="min-height:5000px">
<ul>
<li><a href="#tabs-1">2016 Drivers</a></li>
<li><a href="#tabs-2">2017 Drivers</a></li>
</ul>
<div id="tabs-1">
<div class="container" style="float:left">
<strong>2016 Drivers</strong>
<ul id="list1"></ul>
</div>
</div>
<div id="tabs-2">
<div class="container" style="float:left">
<strong>2017 Drivers</strong>
<ul id="list2"></ul>
</div>
</div>
<div id="fav" class="container1" style="float:left">
<strong>Favourites</strong>
<ul id="list3">
<li>Drop you favourite drivers here...</li>
</ul>
</div>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：修复Json返回对象值 $.each(data.MRData.DriverTable.Drivers, function (i,item) ...
修复 " 和 ' 混合。 姓名：“+name+”，姓氏：“+surname+”
使用长度而不是大小 if($("#list1 li").长度 ==0 )
有关更多错误消息，请参阅开发者工具中的控制台窗口。
【讨论】：
不是 $.each(data.MRData.MRData) 因为就像你告诉我的那样，我得到了 DriverTable undefined 的错误提示 console.log(data) 并检查返回对象。 data.MRData.DriverTable.Drivers 有效。 Uncaught TypeError: Cannot read property 'DriverTable' of undefined at Object. (kol1.html?_ijt=ifi338tcgksrbcml628p0jmvkk:17) at Function.each (jquery.min.js:2) at Object.success (kol1.html?_ijt=ifi338tcgksrbcml628p0jmvkk:16) at u (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at k (jquery.min.js :2) 在 HTMLScriptElement.n (jquery.min.js:2) 在 HTMLScriptElement.dispatch (jquery.min.js:2) 在 HTMLScriptElement.y.handle (jquery.min.js:2) 这是使用 $.each(data.MRData.DriverTable.Drivers, function (i,item) 我知道这是我使用 item.MRData.DriverTable.Drivers.familyName 而不是 item.FamilyName 的变量，顺便谢谢以上是关于使用jquery ajax从url加载json文件的问题的主要内容，如果未能解决你的问题，请参考以下文章
jquery easyui combobox如何动态加载.json数据