当前位置: 动力学知识库 > 问答 > 编程问答 >

json - New to jQuery trying to use $.getJSON

问题描述:

So after a day spent on skim reading w3schools/jQuery docs/Through dozens of examples and watching a few youtube videos just to learn how to get external json data i finally gave up and decided to ask here why doesn't this work

<!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>

And also is there a way to do this from regular javascript without any libraries, I was googling this, but everythin I found pretty much led to $.getJSON

网友答案:

Yes replace onCllick with click and key.name would not work, use key and value separately.

Here is fiddle for you

$(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/>");
            });
        });
    });
});
网友答案:

In jquery, you can use click() function instead of onClick().

Change to

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

to

$("button").click(function(){
网友答案:
  1. onClick is not a jQuery function, use .click, http://api.jquery.com/click/,

  2. $.ajax will do what you want if you specify the datatype. http://api.jquery.com/jquery.ajax/

do something like this

$('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>");
       })
     }
   })
}
网友答案:

You can use native ajax request object without any librearies like

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

then

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

Demo: Fiddle

Note: For supporting older browsers which does not support JSON, you will have to include a polyfil library like json2

分享给朋友:
您可能感兴趣的文章:
随机阅读: