Problem med JSON, jQuery och PHP - HJÄLP!

Permalänk
Medlem

Problem med JSON, jQuery och PHP - HJÄLP!

EDIT - Nedanstående problem löste sig, men nu har jag problem med sidans struktur, se inlägg längre ner. Alla idéer mottages mycket tacksamt.!

Hej! Sitter och bygger en blogg med hjälp av ovanstående tekniker, tillsammans med html och css. Har en databas (mysql) där information om blogginlägg lagras, och ett php-script som hämtar ut data från db och gör om det till JSON. Jag försöker sedan hämta ut JSON med hjälp av jQuery. Koden är följande (obs, har inte tänkt på säkerhet eller något annat om kodkvalitet ännu, vill få det att funka först):

PHP:

<?php $username="root"; $password=""; $database="minblogg"; $link = mysqli_connect("127.0.0.1",$username,$password); mysqli_select_db($link, $database) or die( "Unable to select database"); mysqli_set_charset($link, "UTF8"); $query="SELECT * FROM blogginlagg"; $result = mysqli_query($link, $query); while($rad = mysqli_fetch_assoc($result)) { $arr[] = $rad; } print_r(json_encode($arr)); ?>

jQuery

$.getJSON('get_blogginlagg.php', function(data){ $.each(data, function(key, value){ alert(key + ': ' + value); }) })

Jag får inget felmeddelande, men javascriptrutan som dyker upp visar bara:
0: [object Object="Object"]
1: [object Object="Object"]
2: [object Object="Object"]
Jag har tre poster i databasen, så antalet stämmer, men hur får jag fram infon via jquery?

Om jag går in direkt på php-skriptet ger den korrekt output för JSON (tror jag iaf):

Citat:

[{"id":"1","text":"Det h\u00e4r blir sp\u00e4nnande! Jag sitter nu med phpmyadmin uppe och skriver direkt in i databasen. Det kan g\u00e5 hur som helst k\u00e4nner jag. Wish me luck!","titel":"Mitt f\u00f6rsta blogginl\u00e4gg","ar":"2012","manad":"9","dag":"22","forfattare":"Josefine"},{"id":"2","text":"Det f\u00f6rsta inl\u00e4gget verkar funka \u00e4n s\u00e5 l\u00e4nge! En query direkt i phpmyadmin visar att inl\u00e4gget ligger d\u00e4r det ska, vilket \u00e4r mycket bra. Jag kommer g\u00f6ra ett par inl\u00e4gg till bara f\u00f6r s\u00e4kerhets skull. M\u00e5ste ju ha lite testdata, \u00e4ven om jag inte har n\u00e5got intressant att komma med just nu. ","titel":"Andra inl\u00e4gget","ar":"2012","manad":"9","dag":"22","forfattare":"Josefine"},{"id":"3","text":"Jajem\u00e4n, vi k\u00f6r p\u00e5 med ett tredje inl\u00e4gg. Om jag lyckas visa det h\u00e4r inl\u00e4gget, och de \u00f6vriga tv\u00e5, med hj\u00e4lp av php s\u00e5 avslutar jag f\u00f6r idag och g\u00e5r och k\u00f6per godis. Det \u00e4r \u00e4nd\u00e5 l\u00f6rdagskv\u00e4ll. ","titel":"Tredje g\u00e5ngen gillt","ar":"2012","manad":"9","dag":"22","forfattare":"Josefine"}]

Någon som kan hjälpa mig i rätt riktning? Hur får jag Jquery att "fatta" json?

Permalänk
Medlem

Just det, kan tillägga att jag har validerat min JSON så den ska vara korrekt.

Permalänk
Medlem

$.each(data, function(key, value){
console.log(this.text);
});

Så bör bloggtexten loggas i js consolen i browsern, this.X där X är json nyckeln; id, text,titel osv

Visa signatur

Spelrigg: 800D| i7 3930K@4,7 GHz - Custom WC | 32 GB Kingston HyperX Beast | 7970 GHz X-Edition |1x30 Dell U3011, 2x27" | Sennheiser HD650 | Xonar Essence STX |
Laptop: G74SX 17,3" 120 Hz 3D |
Server: Phenom II X4 955BE | Corsair XMS3 8 GB | 16 HDDs, 27 TB |
HTPCs: ASUS EEE Box 1.8 Ghz | Blu-Ray | OCZ Vertex 2 60 GB | 4 GB RAM |

Permalänk
Medlem
Skrivet av Gnejs:

$.each(data, function(key, value){
console.log(this.text);
});

Så bör bloggtexten loggas i js consolen i browsern, this.X där X är json nyckeln; id, text,titel osv

Ahaaaa, ja titta, där dök texten upp! Så felet var helt enkelt att metoden alert inte kunde visa det format jag försökte få fram?

Hade ingen aning om att det fanns en js-console, hehe. Mkt bra att veta. Såklart dök det upp ett nytt fel som jag inte sett tidigare. I följande funktion klagar den på att sokvag1 är undefined, men allt funkar som det ska och jag tycker den ser deklarerad ut:

/** Nedanstående funktion är ett bildspel. Jag hämtar först in sökvägen till bilden som visas via jQuerys attr-metod. Jag delar sedan upp strängen vid punkten, och lagrar första delen av sökvägen i en variabel. Jag har döpt bilderna till Bilder/Bildspel/1.jpg, Bilder/Bildspel/2.jpg osv, så jag vet att innan punkten finns numret som jag vill ändra, vilket jag gör genom att lagra nuvarande nummer i en variabel, och beroende på vilket som är nuvarande, skapas ett nytt bildnr. **/ setInterval(function(){bytbild()},3000) function bytbild() { var sokvag1 = ""; var splitedarray; var sokvag; var nyttbildnr; var bildnr sokvag1 = $('#bildspel').attr("src"); splitedarray = sokvag1.split(".", 2); sokvag = splitedarray[0]; bildnr = sokvag.charAt(sokvag.length-1); switch (bildnr) { case "1": nyttbildnr = "2"; break; case "2": nyttbildnr = "3"; break; case "3": nyttbildnr = "4"; break; case "4": nyttbildnr = "1"; break; } var nysokvag = splitedarray[0].replace(bildnr, nyttbildnr) + ".jpg"; $('#bildspel').hide(); $('#bildspel').attr("src", nysokvag); $('#bildspel').fadeIn('slow'); }

Permalänk
Medlem
Skrivet av Amöban:

Ahaaaa, ja titta, där dök texten upp! Så felet var helt enkelt att metoden alert inte kunde visa det format jag försökte få fram?

Hade ingen aning om att det fanns en js-console, hehe. Mkt bra att veta. Såklart dök det upp ett nytt fel som jag inte sett tidigare. I följande funktion klagar den på att sokvag1 är undefined, men allt funkar som det ska och jag tycker den ser deklarerad ut:

Typ så ja. Det fanns ingen definition för hur objektet skulle representeras som sträng.

Consolen är lite smidigare att använda än alert()
Om det nu funkar så.... jadu
Sen ser jag flera problem med din "bildbytar"funktion, men antar att det bara är 'proof of concept' nu så det löser du nog sen

Visa signatur

Spelrigg: 800D| i7 3930K@4,7 GHz - Custom WC | 32 GB Kingston HyperX Beast | 7970 GHz X-Edition |1x30 Dell U3011, 2x27" | Sennheiser HD650 | Xonar Essence STX |
Laptop: G74SX 17,3" 120 Hz 3D |
Server: Phenom II X4 955BE | Corsair XMS3 8 GB | 16 HDDs, 27 TB |
HTPCs: ASUS EEE Box 1.8 Ghz | Blu-Ray | OCZ Vertex 2 60 GB | 4 GB RAM |

Permalänk
Medlem
Skrivet av Gnejs:

Typ så ja. Det fanns ingen definition för hur objektet skulle representeras som sträng.

Consolen är lite smidigare att använda än alert()
Om det nu funkar så.... jadu
Sen ser jag flera problem med din "bildbytar"funktion, men antar att det bara är 'proof of concept' nu så det löser du nog sen

Kommer inte ha tid att förbättra bildbytarfunktionen direkt, så berätta gärna vad du ser för problem.

Permalänk
Medlem

Hjälp med struktur också.

Okej, jag har en databas med en tabell för blogginlägg, en för kategori, och en sambandstabell där man kopplar ihop dessa. Plockar ut infon med hjälp av php som JSON och visar med hjälp av jQuery. På samma sida som blogginläggen visas har jag en dropdown lista, och här laddas kategorierna från databasen in. Blogginläggen laddas in i en div bredvid via getJSON. Så långt allt väl.

Men hur gör man för att välja ut de inlägg som hör till en viss kategori utan att ladda om sidan? Min nuvarande lösning är bortom skitful: samtidigt som jag hämtar in jsonobjekten och visar infon som html, sätter jag kategorin som en css-klass på artikeln. Det funkar en gång, men sedan måste sidan laddas om. jag upptäckte också att mysql-queryn inte stämmer, eftersom varje inlägg ska kunna ha flera kategorier, men inte visas flera gånger för det. Jag kan (väl?) inte göra ett nytt anrop till databasen heller, för då måste ju sidan laddas om och det vill jag ju inte. Hur hade ni gjort?

Nuvarande kod
PHP:

require_once('opendb.php'); $query="select * from blogginlagg, inlaggkategori where blogginlagg.id = inlaggkategori.inlaggid"; $result = mysqli_query($link, $query); while($rad = mysqli_fetch_assoc($result)) { $arr[] = $rad; } print_r(json_encode($arr));

Javascript:

$.getJSON('get_blogginlagg.php', function(data){ $.each(data, function(key, value){ var bloggartikel = $(document.createElement('article')); bloggartikel.addClass('blogg'); bloggartikel.addClass(this.kategorinamn); console.log(this.kategorinamn); $('#bloggsektion').append(bloggartikel); $(bloggartikel).append( '<h1>' + this.titel + '</h1>' + '<p class="blogginlagg">' + this.text + '</p>' + '<div class="namnteckning">' + '<img src="Bilder/Grafik/namnteckning.gif" alt="Namnteckning" />' + '<p class ="forfattarinfo">' + this.forfattare + ', den ' + this.dag + '/' + this.manad + ' ' + this.ar); }); }) $('#kategoriknapp').click(function() { var kategori = $("select").val(); var doldainlagg = $("article").not("." + kategori); $.each(doldainlagg, function(index, value) { $(value).hide(); }) })

Permalänk
Medlem
Skrivet av Amöban:

Kommer inte ha tid att förbättra bildbytarfunktionen direkt, så berätta gärna vad du ser för problem.

Om du inte hade tänkt dig att ändra antalet bilder så kan det nog ignoreras:p

Skrivet av Amöban:

Okej, jag har en databas med en tabell för blogginlägg, en för kategori, och en sambandstabell där man kopplar ihop dessa. Plockar ut infon med hjälp av php som JSON och visar med hjälp av jQuery. På samma sida som blogginläggen visas har jag en dropdown lista, och här laddas kategorierna från databasen in. Blogginläggen laddas in i en div bredvid via getJSON. Så långt allt väl.

Men hur gör man för att välja ut de inlägg som hör till en viss kategori utan att ladda om sidan? Min nuvarande lösning är bortom skitful: samtidigt som jag hämtar in jsonobjekten och visar infon som html, sätter jag kategorin som en css-klass på artikeln. Det funkar en gång, men sedan måste sidan laddas om. jag upptäckte också att mysql-queryn inte stämmer, eftersom varje inlägg ska kunna ha flera kategorier, men inte visas flera gånger för det. Jag kan (väl?) inte göra ett nytt anrop till databasen heller, för då måste ju sidan laddas om och det vill jag ju inte. Hur hade ni gjort?

Helt slut då jag precis kommit hem efter att ha kört 70 mil idag genom regn å mörker å skit så orkade inte läsa supernoga men men.
Så här skulle jag gjort iaf.
Populera selecten med dina kategorier och idn. vid t.ex. onchange hämta ut kategoriid och skicka med den i en post/get request som path parameter lr json content parameter. Låt serversidan plocka ut rätt inlägg baserat på föregående id och langa tillbaka JSONen för dessa. Låt success callbacken ta hand om datan och renderera html elementen med datan du fick med anropet.

Edit: Appropå reuqesten, då du kör php kanske det är lättare att lägga till parametern på nåt anant sätt? .php?cat_id=x eller nåt. Kör in princip aldrig php själv så vad som passar bäst för det har jag inte en blekast om.
Js requests mot Rest resurser skrivna i Java är det jag är van vid

Visa signatur

Spelrigg: 800D| i7 3930K@4,7 GHz - Custom WC | 32 GB Kingston HyperX Beast | 7970 GHz X-Edition |1x30 Dell U3011, 2x27" | Sennheiser HD650 | Xonar Essence STX |
Laptop: G74SX 17,3" 120 Hz 3D |
Server: Phenom II X4 955BE | Corsair XMS3 8 GB | 16 HDDs, 27 TB |
HTPCs: ASUS EEE Box 1.8 Ghz | Blu-Ray | OCZ Vertex 2 60 GB | 4 GB RAM |