gpt4 book ai didi

javascript - 如何使用ajax调用从现有url显示json数据

转载 作者:行者123 更新时间:2023-11-28 07:17:51 25 4
gpt4 key购买 nike

我是使用 json 和 jquery 的新手。我正在尝试通过一些示例来学习 json 和 jquery 的基础知识。所以我使用 http://api.androidhive.info/contacts 中现有的 json 数据以我为例。我想在我的 HTML 页面中显示这些数据。我的代码是:

<html>
<head>
<title>jQuery Ajax Example with JSON Response</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function(){
$(':submit').on('click', function() { // This event fires when a button is clicked
alert("submitt worked.");
$.ajax({ // ajax call starts
url: 'http://api.androidhive.info/contacts/', // JQuery loads serverside.php
type: "GET",
dataType: 'json', // Choosing a JSON datatype
success: function (msg) {
alert("ajax worked.");
JsonpCallback(msg);

},
})
function JsonpCallback(json)
{
for (var i in json.contacts) {
$('#wines').append('contacts: ' + json.contacts[i] + '<br/>');
}

}

return false; // keeps the page from not refreshing
});
});
</script>

</head>

<body>
<form method="post" action="">
<button value="all" type="submit">Get!</button>

</form>

<div id="wines">
<!-- Javascript will print data in here when we have finished the page -->
</div>

</body>
</html>

谁能给我简单介绍一下 JSON 及其工作原理吗?

提前致谢。

最佳答案

您迭代的 JSON 是错误的,在您的情况下,因为您使用的是 jQuery(如上所述),您可以使用 $.each(json,callback); jQuery 的帮助程序,您可以在此处查看文档 Jquery $.each documentation

对于示例实现,我创建了此 JSFIDDLE LINK为你。祝你有美好的一天。不要忘记 JSON 意味着

Javascript Object Notation

它是一个对象。

$.each(jsonData.contacts, function(k, v)
{
console.log(v.name);
$('#name').append('<li>'+v.name+'</li>');
});

关于javascript - 如何使用ajax调用从现有url显示json数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30658772/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com