webForumDet fria alternativet

Ladda in xml från API vid "keypress"

11 svar · 901 visningar · startad av Tibbelit

TibbelitMedlem sedan mars 200986 inlägg
#1

Hej!

Jag försöker skapa en dynamisk sökfunktion (eller vad man ska kalla det), genom att när man skriver några bokstäver så ger den resultat på filmer som innehåller dessa. T.ex. Man skriver star så visas "star wars", "star trek" osv.

Allt fungerar fint, när jag jämför med en xml-fil jag har på datorn, men nu är det så att jag vill använda ett API när jag söker efter filmer. D.v.s. när jag skriver "s" så vill jag hämta data från http://xxx.xx/api?seach" osv. Detta fungerar bra i webbläsaren, samt som jag när själva html-sidan laddas laddar in xml från api. Men när jag vill ladda in det när en action sker t.ex. "keypress" så vill den inte lad


da in xml från api... Någon som vet varför?

Jag är ganska grön inom detta område (som ni kanske märker), men det är ju roligt att lära sig mer!

Bifogar lite kod om det hjälper! =)

Det är inte det riktiga api som är inskrivet utan istället en kopia av svaret som ligger på adressen tibbelit.se/movies.xml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | jQuery Image Zoom</title>
<link href="../style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{	
	$('#movie').keypress(function() {
	  var movie = document.getElementById("movie");
	  getMovies(movie);
	});
		
	function getMovies(movies)
	{
		$.ajax({
			type: "GET",
			url: "http://www.tibbelit.se/movies.xml", /* Det är denna som strular när man har en absolut adress på nätet, har man en relativ fungerar den fint!*/
			dataType: "xml",
			success: xmlParser
		});
		
		
	};
});

function xmlParser(xml) {	
	alert("Kör xmlParsers");
	$(xml).find("info").each(function () {
		$(xml).find("movie").each(function () {
			$('.main').append($(this).find("name").text()+'<br />');
		});
    });
}
</script>

</head>
<body>
<form>
<p>Film: <input type="text" name="movie" id="movie" /></p>
</form>

<div class="main">
<!-- Här visas resultaten -->
</div>

</body>
</html>
voigtann1Medlem sedan juni 20019 519 inlägg
#2

Är det mot samma server du kör anropet mot?

The_HulkMedlem sedan juni 20031 837 inlägg
#3

xml-filen och själva html-filen som anropar xml-filen måste ligga på samma server om du ska lösa det via javascript. webbläsarna tillåter inte cross-domain anrop.
I så fall får du göra ett skript (t.ex. PHP eller ASP) på din egen server som hämtar xml-filen från den andre domänen.

TibbelitMedlem sedan mars 200986 inlägg
#4

The_Hulk skrev:

xml-filen och själva html-filen som anropar xml-filen måste ligga på samma server om du ska lösa det via javascript. webbläsarna tillåter inte cross-domain anrop.
I så fall får du göra ett skript (t.ex. PHP eller ASP) på din egen server som hämtar xml-filen från den andre domänen.

Okej, det var därför det inte fungerade, misstänkte att det var något sånt! Synd, vet inte riktigt hur jag ska lösa det då, men det löser sig säkert! =)

Skulle då typ behöva en xml-fil med alla filmer som man kan söka efter. Får se om det går och få tag i en sådan!

Tak för svaren btw =)

voigtann1Medlem sedan juni 20019 519 inlägg
#5

En dum fråga men: http://www.tibbelit.se/movies.xml är väl ändå din url? Om du vill att andra skall kunna använda det så kan du titta på att köra JSON och JSONP för att komma åt informationen från andra sajter.

TibbelitMedlem sedan mars 200986 inlägg
#6

voigtann1 skrev:

En dum fråga men: http://www.tibbelit.se/movies.xml är väl ändå din url? Om du vill att andra skall kunna använda det så kan du titta på att köra JSON och JSONP för att komma åt informationen från andra sajter.

Jo, den filen är på min server. Men jag vill ha resultatet från en sökning på filmtipsets API som ska laddas när man gör en sökning, (ska laddas om vid varje "keypress"). Detta verkar ju inte fungera med javascript och XML om jag förstod det rätt. Har ingen kunskap om JSON eller JSONP, men skulle det kunna lösa mitt problem läser jag gärna in mig på det området! =)

Får inte rätt på när jag ska läsa ut från Json. resultatet jag får från api (nedan) börja och slutar med "[" och "]". Tar jag bort dessa (d.v.s. lägger in statisk källa) så fungerar allt. Hur får jag bort dessa när jag får de inkluderade i svaret från api?

Exempelsvar:

[{"request":{"action":"search","id":"star wars"},"source":"filmtipset.se","data":[{"hits":[{"movie":{"country":"USA","search_sort_order":1,"imdb":"0076759","grade":{"count":"24950","value":"5","type":"official"},"name":"Stjärnornas krig","filmtipsetgrade":{"count":"24950","value":"5"},"director":"George Lucas","orgname":"Star Wars","url":"http://www.filmtipset.se/film/stjarnornas-krig.html","id":"233","alt_title":"Stjärnornas krig, del IV - Ett nytt hopp,Star Wars: Episode IV - A New Hope","year":"1977"}}, osv...

Det verkar alltså som om det första tecknet inte vill som jag vill. Jag började precis läsa om Json så jag kanske gör någon stort nybörjarmisstag... =)

När jag försöker skriva ut (document.witeln) själva jsonkoden får jag bara "[object Object]"

voigtann1Medlem sedan juni 20019 519 inlägg
#7

Det är en array du får av ditt JSON callback, du behöver loopar ut den eller ta object.data för det är där du har alla dina träffar vad det ser ut som.

Jo, den filen är på min server. Men jag vill ha resultatet från en sökning på filmtipsets API som ska laddas när man gör en sökning, (ska laddas om vid varje "keypress"). Detta verkar ju inte fungera med javascript och XML om jag förstod det rätt.

Nja, det är ju en halvsanning med det, xml gå utmärkt att läsa ut, så länge den är från din egna server, om du ända laddarner från filmtipsets API till din egna server så är det bara att köra på

TibbelitMedlem sedan mars 200986 inlägg
#8

voigtann1 skrev:

Det är en array du får av ditt JSON callback, du behöver loopar ut den eller ta object.data för det är där du har alla dina träffar vad det ser ut som.
Nja, det är ju en halvsanning med det, xml gå utmärkt att läsa ut, så länge den är från din egna server, om du ända laddarner från filmtipsets API till din egna server så är det bara att köra på

Jo, men jag behöver ju läsa ut från filmtipsets API för att få sökresultaten. Därför kan jag inte läsa av från min min egen server. Jag har ju ingen info på min server, allt ligger på filmtipsets API.

Angående Json så kan jag läsa ut info genom object.data hur bra som helst om jag manuellt tar bort det första "[" och det sista "]"... Dessa verkar strula till det, vet inte varför de finns där. Kollade på exempel på json-kod och där började det alltid med { och inte [. När jag försöker få ut data från json (API) får jag bara "Undifined"

voigtann1Medlem sedan juni 20019 519 inlägg
#9

Var har du deras API som du beskriver? Har du din kod upplagd någonstans?

jsonObj = {
	"request":{
		"action":"search",
		"id":"star wars"
	},
	"source":"filmtipset.se",
	"data": [
		{"hits":[
				{"movie":{"country":"USA","search_sort_order":1,"imdb":"0076759","grade":{"count":"24950","value":"5","type":"official"},"name":"Stjärnornas krig","filmtipsetgrade":{"count":"24950","value":"5"},"director":"George Lucas","orgname":"Star Wars","url":"http://www.filmtipset.se/film/stjarnornas-krig.html","id":"233","alt_title":"Stjärnornas krig, del IV - Ett nytt hopp,Star Wars: Episode IV - A New Hope","year":"1977"}}
			]
		}
	]
}

Så få man ut jsonObj.data en array av träffar.

TibbelitMedlem sedan mars 200986 inlägg
#10

voigtann1 skrev:

Var har du deras API som du beskriver? Har du din kod upplagd någonstans?

jsonObj = {
	"request":{
		"action":"search",
		"id":"star wars"
	},
	"source":"filmtipset.se",
	"data": [
		{"hits":[
				{"movie":{"country":"USA","search_sort_order":1,"imdb":"0076759","grade":{"count":"24950","value":"5","type":"official"},"name":"Stjärnornas krig","filmtipsetgrade":{"count":"24950","value":"5"},"director":"George Lucas","orgname":"Star Wars","url":"http://www.filmtipset.se/film/stjarnornas-krig.html","id":"233","alt_title":"Stjärnornas krig, del IV - Ett nytt hopp,Star Wars: Episode IV - A New Hope","year":"1977"}}
			]
		}
	]
}

Så få man ut jsonObj.data en array av träffar.

Det gick nu. Json låg tydligen i en lista [], så för att få ut fick jag skriva t.ex. jsonObj[0].data =) Frågan är nu hur jag ska få ut ny data från API varje gång funktionen som aktiveras via "keypress" körs! =)

voigtann1Medlem sedan juni 20019 519 inlägg
#11

Det är ju bara att anropar api:et för varje keypress, istället för AJAX call så få du köra deras API, svårt att hjälpa när man inte har mer att gå på.

TibbelitMedlem sedan mars 200986 inlägg
#12

Fick det att fungera delvis som jag vill nu =)

132 ms totalt · 3 externa anrop · v20260731065814-full.0e50b1ef
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
130 ms — hämta tråd, inlägg och bilagor (db)