jQuery尝试使用$.getJSON的新手_Jquery_Json

jQuery尝试使用$.getJSON的新手

jquery json

jQuery尝试使用$.getJSON的新手,jquery,json,Jquery,Json,因此，在花了一天的时间浏览w3schools/jQuery文档，浏览了几十个示例，观看了一些youtube视频，学习如何获取外部json数据之后，我最终放弃了，并决定在这里问为什么这样做行不通 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> $(document).ready(

因此，在花了一天的时间浏览w3schools/jQuery文档，浏览了几十个示例，观看了一些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>


$（文档）.ready（函数（）{
$（“按钮”）.onClick（函数（）{
$.getJSON（“https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a”，功能（结果）{
$。每个（结果、函数（键、值）{
$（“div”）.append（“+key.name+”）；
});
});
});
});
获取Json数据

还有一种方法可以在没有任何库的情况下从常规javascript中实现这一点，我在谷歌上搜索了一下，但我发现几乎所有的东西都导致了$.getJSON

在jquery中，您可以使用

click（）

函数而不是

onClick（）

改为

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

到

onClick不是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>");
       })
     }
   })
}

$（“按钮”）。单击（函数（e）{
$.ajax({
url:“https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a“，
成功：功能（数据）{
$。每个（数据、函数（键、值）{
$（“div”）.append（“+key+”）；
})
}
})
}
是将onCllick
替换为单击
和key.name不起作用，请分别使用key和value
这是给你的
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.getJSON（“https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a”，功能（结果）{
$。每个（结果、函数（键、值）{
$（“div”）。追加（“+key+”--“+value+”
）；
});
});
});
});
您可以使用本机ajax请求对象，而无需任何库，如
<button onclick="load()">Get Json Data</button>
<div id="content"></div>

获取Json数据

然后
函数加载（）{
var-xmlhttp；
if（window.XMLHttpRequest）{
//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}否则{
//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
var text=xmlhttp.responseText；
var result=JSON.parse（文本）；
var数组=[]；
for（var输入结果）{
if（result.hasOwnProperty（key））{
array.push（“+key+”--“+result[key]+”
”）
}
}
document.getElementById（'content'）.innerHTML=array.join（''）
}
}
open（“GET”https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/netuetamundis?api_key=b05c2251-f659-4d24-8b5f-6b25a482b42a”，正确）；
xmlhttp.send（）；
}

演示：
注意：要支持不支持的旧浏览器，您必须包括一个polyfil库，如
chnage to$（“按钮”）。单击
to$（“按钮”）。单击
Nothing，按钮将保持无响应。指定的问题是$。getJSON，此外，方便方法很好，因为它们可以立即传达意图：“我正在尝试从此URL检索JSON”，而不是花费大量的脑力周期来寻找数据类型，试图确定该URL所期望的数据类型。
$(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/>");
            });
        });
    });
});

<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();
}