Question

所以花了一天时间浏览w3schools / jQuery docs /通过几十个例子并观看一些youtube视频只是为了学习如何获取外部json数据我终于放弃了并决定问这里为什么不工作

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){
    $("button").onClick(function(){
    $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a"  , function(result){
            $.each(result, function(key, value){
            $("div").append("<b>" + key.name + "</b>");
            });
        });
    });
});
</script>
</head>

<body>
<button>Get Json Data</button>
<div></div>
</body>
</html>

还有一种方法可以从没有任何库的普通javascript中做到这一点，我正在谷歌上搜索这个，但是我发现几乎导致了$ .getJSON

Answer 1

在jquery中，您可以使用click()函数代替onClick()。

更改为

$("button").onClick(function(){

到

$("button").click(function(){

Answer 2

onClick不是jQuery函数，使用.click，http://api.jquery.com/click/，
$。如果指定数据类型，ajax将执行您想要的操作。 http://api.jquery.com/jquery.ajax/

做这样的事情

$('button').click(function(e){
   $.ajax({
     url: "https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a",
     success: function(data){
       $.each(data, function(key, val){
            $("div").append("<b>" + key + "</b>");
       })
     }
   })
}

Answer 3

是将onCllick替换为click并且key.name不起作用，请分别使用密钥和值。

以下是fiddle

$(document).ready(function(){
    $("button").click(function(){
    $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a"  , function(result){
            $.each(result, function(key, value){
            $("div").append("<b>" +key+"--"+value +"</b><br/>");
            });
        });
    });
});

Answer 4

您可以使用本机ajax请求对象，而无需任何像

这样的库

<button onclick="load()">Get Json Data</button>
<div id="content"></div>

然后

function load() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var text = xmlhttp.responseText;
            var result = JSON.parse(text);

            var array = [];
            for (var key in result) {
                if (result.hasOwnProperty(key)) {
                    array.push("<b>" + key + "--" + result[key] + "</b><br/>")
                }
            }
            document.getElementById('content').innerHTML = array.join('')
        }
    }

    xmlhttp.open("GET", "https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a", true);
    xmlhttp.send();
}

演示：Fiddle

注意：要支持不支持JSON的旧版浏览器，您必须添加一个polyfil库，例如json2

jQuery尝试使用$ .getJSON的新手

4 个答案: