JSON example: jQuery parses JSON data

JSON is a more convenient data in the form of specific you can refer to http://baike.baidu.com/view/136475.htm is quite detailed.

Today, I wrote a JSON object using JQuery and used the $. getJSON method to obtain JSON data and parse it easily.

From http://api.flickr.com/services/feeds/photos_public.gne? Tags = cat & tagmode = any & format = json & jsoncallback =? This address obtains JSON data, analyzes the structure, and generates images and related links:

JS:

 
 

  
  
$ (Function (){
  
  
Var url = "http://api.flickr.com/services/feeds/photos_public.gne? Tags = cat & tagmode = any & format = json & jsoncallback =? "
  
  
$. GetJSON (// use the getJSON method to retrieve JSON data
  
  
Url,
  
  
Function (data) {// processing data points to the returned JSON data
  
  
Var tit = "<a href = '" + data. link + "'>" + data. title + "<\/a>"; // generate a title and title connection
  
  
$ ("H1" 2.16.html (tit); // appears in the specified position H1
  
  
$ ("# Ginfo"). find ("p" ).eq(0).html (data. modified );
  
  
$ ("# Ginfo"). find ("p" ).eq(1).html (data. generator );
  
  
Var lis = ""; // li list project
  
  
$ (Data. items). each (function (I, ite) {// retrieve JSON data to obtain the required form
  
  
Lis + = "<li> ";
  
  
Lis + = "<a href = '" + ite. link + "'> <\/a> ";
  
  
Lis + = "<div> ";
  
  
Lis + = ite. description;
  
  
Lis + = "<\/div> <\/li> ";
  
  
})
  
  
$ ("Ul" ).html (lis); // present the retrieved data to the desired location
  
  
$ ("Li "). hover (function () {$ (this ). addClass ("hov")}, function () {$ (this ). removeClass ("hov ")});
  
  
}
  
  
)
  
  
})
 
 

HTML:

 
 

  
  
<div class="main"> 
  
  
    <div class="ginfo" id="ginfo">      
  
  
         
  
        <p></p> 
  
  
        <p></p> 
  
  
   </div> 
  
  
   <ul>         
  
  
   </ul> 
  
  
</div>    
 
 

Finally let's talk about the JSON data format is actually a text file, you can easily parse can also directly view the http://api.flickr.com/services/feeds/photos_public.gne? Tags = cat & tagmode = any & format = json & jsoncallback =? This address.

 
 

  
  
({        
  
  
 "title": "Recent Uploads tagged cat",         
  
  
 "link": "http://www.flickr.com/photos/tags/cat/",        "description": "",    
  
  
      "modified": "2009-08-03T01:50:45Z",         
  
  
 "generator": "http://www.flickr.com/",         
  
  
 "items"    
  
  
     {            
  
  
  "title": "DSC06844",         
  
  
     "link": "http://www.flickr.com/photos/g_bugel/3783605340/",              
  
  
"media": {"m":"http://farm3.static.flickr.com/2638/3783605340_a3cfc9eeb9_m.jpg"},             
  
  
 "date_taken": "2009-07-06T07:27:59-08:00",            
  
  
 "description": "<p><a href=\"http://www.flickr.com/people/g_bugel/\">g.bugel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/g_bugel/3783605340/\" title=\"DSC06844\"><\/a><\/p> ",           
  
  
   "published": "2009-08-03T01:50:45Z",           
  
  
   "author": "nobody@flickr.com (g.bugel)",           
  
  
   "author_id": "38658309@N00",             
  
  
   "tags": "china cat feline beijing 2009 chinalab chinalab2009"        
  
  
 },{......}); 
 
 

Click here to view the DEMO

Link: http://www.cnblogs.com/pifoo/archive/2011/05/21/Json-Example.html