2016-07-05 10 views
-2
<html> 
<head> 
<title>AJAX JSON </title> 
<script type="application/javascript"> 
function load() 
{ 
    var url = "http://www.tutorialspoint.com/json/data.json";//use url that have json data 
    var request; 
//XMLHttpRequest Object is Created 
    if(window.XMLHttpRequest){  
    request=new XMLHttpRequest();//for Chrome, mozilla etc 
    }  
    else if(window.ActiveXObject){  
    request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only 
    }  
//XMLHttpRequest Object is Configured 
    request.onreadystatechange = function(){ 
     if (request.readyState == 4) 
     { 
     var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object 
     document.getElementById("name").innerHTML = jsonObj.name; 
     document.getElementById("country").innerHTML = jsonObj.country; 
     } 
    } 
    request.open("GET", url, true); 
    request.send(); 
} 
</script> 
</head> 
<body> 

Name: <span id="name"></span><br/> 
Country: <span id="country"></span><br/> 
<button type="button" onclick="load()">Load Information</button> 
</body> 
</html> 

jsonコードを使用してjsonデータを取得する方法のコードを記述しました。このコードをjqueryを使用してjsonデータに変換します。また、私はajaxコードで使用した同じjson URLを使用したい。 jqueryを使用してjsonデータを取得する方法JSONデータをJqueryコードに変換するためのajaxコードの変換方法

+0

Er、 '$ .ajax'おそらく? – gcampbell

+0

http://api.jquery.com/jQuery.ajax/ –

答えて

2
Name: <span id="name"></span><br/> 
Country: <span id="country"></span><br/> 
<button type="button" id="load">Load Information</button> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('#load').click(function() { 
     $.get('https://www.tutorialspoint.com/json/data.json', function(response) { 
     $('#name').text(response.name); 
     $('#country').text(response.country); 
     }); 
    }); 

    }); 
</script> 
+0

ありがとうございました。 – Rahul

+0

getメソッドの "r"の意味は? – Rahul

+0

これはサーバーからの応答JSONです。私は自分の答えを更新した –

関連する問題