Just nu i M3-nätverket
Jump to content

Ajax med JSON (HJÄLP!)


skrangeljocke

Recommended Posts

skrangeljocke

Jag skulle verkligen behöva lite hjälp av nån som förstår mer än jag om det här. Jag har fått i uppdrag att skapa ett "projekt" som hämtar bokmärkesinformation från delicious.com.

 

Jag ska "skapa en lista med en godtycklig användares bokmärken kategoriserade med en godtycklig kategori. En rad i listan ska visa namnet på den bokmärkta sidan och vara klickbar så att ett klick leder till att aktuell sida visas."

 

Grejen är den att jag känner mig helt tom i huvvet och inte ens vet var jag ska börja. Jag fattar inte riktigt hur Ajax funkar och hur jag ska gå till väga för att utföra den här uppgiften på ett fint och smidigt sätt. Jag förstår inte heller hur Delicious funkar om jag ska va ärlig.

 

Så här ser koden ut i nuläget:

 

var config = {
"tags": "vfx+compositing",
"user": "andreasl",
"scriptTagTarget": "scriptTagDiv",
"deliciousTarget": "deliciousLinks",
"callbackFunction": "fetchDelicious"
};

window.onload = function() {
var url = 'http://feeds.delicious.com/v2/json/' + config.user + '/' + config.tags + '?callback=' + config.callbackFunction;
var scriptDiv = document.getElementById(config.scriptTagTarget);
addScriptTag(url, scriptDiv);
};



function addScriptTag(url, scriptDiv) {
if (scriptDiv.hasChildNodes())
{
   	scriptDiv.removeChild(scriptDiv.firstChild)
};

var scriptElement = document.createElement('script');
scriptElement.setAttribute('src', url);
scriptDiv.appendChild(scriptElement);
}

function fetchDelicious(json) {

alert("Antal bokmärken för " + config.user +" med taggen " + config.tags + ": "  + json.length);

}

 

 

Och html-koden:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="script/fetchDelicious.js" type="text/javascript" charset="utf-8">
</script>
 <link rel="stylesheet" href="styles/fetchDelicious.css" type="text/css" media="screen" title="no title" charset="utf-8" />
 <title>
  index
 </title>
</head>
<body>
 <h1>
  Exempelsida
 </h1>
 <p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <div id="deliciousLinks"></div>
 <div id="scriptTagDiv"></div>
</body>
</html>

 

Och typ såhär ska det se ut när koden har genererat listan:

 

<ul>
  <li>
   <a href="[url="http://www.finalight.com/-/"]http://www.finalight.com/-/">Final[/url] Light - Visual FX Stock Footage</a>
   <ul>
<li>
     <a href="[url="http://delicious.com/andreasl/video"]http://delicious.com/andreasl/video">video</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/vfx"]http://delicious.com/andreasl/vfx">vfx</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/stock"]http://delicious.com/andreasl/stock">stock</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/film"]http://delicious.com/andreasl/film">film</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/compositing"]http://delicious.com/andreasl/compositing">compositing</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/explosions"]http://delicious.com/andreasl/explosions">explosions</a[/url]>
</li>
   </ul>
  </li>
  <li>
   <a href="[url="http://www.thefoundry.co.uk/pkg_training.aspx?ui=CBC2593A-2C9F-4EF9-84BE-C198B0171453"]http://www.thefoundry.co.uk/pkg_training.aspx?ui=CBC2593A-2C9F-4EF9-84BE-C198B0171453">The[/url] Foundry - Training</a>
   <ul>
<li>
     <a href="[url="http://delicious.com/andreasl/tutorials"]http://delicious.com/andreasl/tutorials">tutorials</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/training"]http://delicious.com/andreasl/training">training</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/nuke"]http://delicious.com/andreasl/nuke">nuke</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/compositing"]http://delicious.com/andreasl/compositing">compositing</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/vfx"]http://delicious.com/andreasl/vfx">vfx</a[/url]>
</li>
   </ul>
  </li>
  <li>
   <a href="[url="http://www.screamingdeathmonkey.com/"]http://www.screamingdeathmonkey.com/">SDM-Website</a[/url]>
   <ul>
<li>
     <a href="[url="http://delicious.com/andreasl/vfx"]http://delicious.com/andreasl/vfx">vfx</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/effects"]http://delicious.com/andreasl/effects">effects</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/compositing"]http://delicious.com/andreasl/compositing">compositing</a[/url]>
</li>
<li>
     <a href="[url="http://delicious.com/andreasl/studio"]http://delicious.com/andreasl/studio">studio</a[/url]>
</li>
   </ul>
  </li>
 </ul>

 

All hjälp skulle vara mycket uppskattad. Men framför allt vill jag bara få hjälp med att komma igång. Av nån anledning tycks jag inte kunna reda ut hur jag över huvud taget ska börja med det här...

 

Tack på förhand.

Link to comment
Share on other sites

Det första du borde göra är att sätta dig in i hur delicious API fungerar, så kolla på sajten.

Där borde finnas exempel hur du hämtar en lista.

 

Sedan kan vi fortsätta när du har listan "i din hand".

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...