Keskustelu: Nettisivujen teko: Ajax - kahden tiedon hakeminen yhdellä toiminnolla

pistemies [11.10.2011 17:58:29]

Mietin hiukan tällaista asiaa.
Minulla on ennen tätä toimintoa haettu aloitus- ja lopetusrivi, jotka on javascript-muuttujissa.
Tämä hakee select-valikkoon listan tiedostoista (ilman tuota alinta riviText-skriptiä). Siihen haluaisin hakea muistiin nuo mainitut rivit tiedostosta.
Homma tökkäsee juuri tuohon, miten tämä kahden asian haku ajaxilla onnistuu.

if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
}
else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("tiedosto-valinta").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","aja/searchFile.php?numero="+myNumber+"&rivi="+thisFile,true);
xmlhttp.send();
riviText = xmlhttp.open("GET","aja/searchRows.php?numero="+myNumber+"&rivi="+thisFile+"&row="+copyToFile+"&row2="+copyToFile2,true);

Jos jotakin kiinnostaa, niin asia sitten etenee siten, että valitsemalla vetovalikosta jonkun tiedostonimen, se aukenee textareaan jne...painamalla Esc koko homman voi perua ja css-popup sulkeutuu.
Ps. Sen verran asiasta. Mainitsin, että nuo rivit on haettu aikaisemmin. Itse asiassa se toinen rivi haetaan samassa yhteydessä kuin tämä tulostetaan, minkä vuoksi rivien välistä tekstiä ei voi aiemmin poimia ylös. Seuraavassa taas ajaxilla poimitaan se valitun tiedoston sisältö, joten tämä kahden ajax-toiminnan "päällekkäisyys" on melkein väistämätön...

Mod. korjasi oikeat kooditagit!

Metabolix [11.10.2011 18:18:41]

echo json_encode(array(
  "tieto1" => "hei",
  "tieto2" => "heihei"
));

var tiedot = JSON.parse(xmlhttp.responseText);
alert(tiedot.tieto1); // hei
alert(tiedot.tieto2); // heihei

// Yksinkertainen tuki vanhoille selaimille (IE 7, Fx 3.0)
// (Parempi: https://github.com/douglascrockford/JSON-js)
if (typeof JSON != "object") JSON = {};
if (typeof JSON.parse != "function") {
  JSON.parse = function(str) {
    return eval("(" + str + ")");
  };
}

pistemies [11.10.2011 19:22:05]

Minulla herjaa tuota JSON.parse riviä tiedot-muuttujassa, vaikka on tämä tunnistus näin.

    if (typeof JSON != "object") JSON = {};
    if (typeof JSON.parse != "function") {
				  JSON.parse = function(str) {
				    return eval("(" + str + ")");
				  };
    }
	var tiedot = JSON.parse(xmlhttp.responseText);

       document.getElementById("tiedosto-valinta").innerHTML=tiedot.valikko;
       riviText = tiedot.rivit;

      alert(riviText);

Minulla on Firefox 3.6, php-tiedostossa olen tulostanut tuon mainitun arrayn.
Tuo JSON ei taida olla kovinkaan vanha, jos on minun selaimesta kiinni...

Ps. Tässäpä mun selain Mozilla/5.0 (X11; U; Linux i686; fi-FI; rv:1.9.2.18) Gecko/20110628 Ubuntu/10.04 (lucid) Firefox/3.6.18
103
Vai onko kyseessä versio 5... tai 10.04.... :)

Metabolix [11.10.2011 19:30:53]

Koodissasi on varmaan sitten jokin vika. Kannattaa korjata, niin toimii paremmin.

Huonoon kysymykseen huono vastaus. Eli voisit edes kertoa, mitä se herjaa, ja tarkistaa (esim. alertilla), että responseText on järkevä.

pistemies [11.10.2011 20:07:41]

Virhekonsolissa lukee pelkästään JSON.parse sekä linkki riville.
Molemmissa tiedoissa näyttäisi olevan tekstiä.
Voisiko jotkut merkit tekstissä vaikuttaa tuohon...
Pitäisikö lainausmerkkien edessä olla kenoviiva, kun nuo arvot ovat noin:

echo json_encode(array("valikko" => $div,"rivit" => $tekstit2));

Tällainen testi ei tulostanut tuohon mitään.

alert(xmlhttp.responseText);
 // var tiedot = JSON.parse(xmlhttp.responseText);

Laittelin siihen tuon uf8_encoden. Eka kerralla herjasi että muuttujaa tiedot, mutta sitten taas tuota yhtä ja samaa "JSON.parse"..

Metabolix [11.10.2011 20:24:45]

Epäilen kyllä, että siinä lukee jotain muutakin. Pakko on myös ihmetellä, miten et vieläkään osaa käyttää kunnollisia kehitystyökaluja kuten Firebugia tai Operan tai Chromiumin vastaavia virhekonsoleita.

Kai käytät UTF-8-enkoodausta? Se on JSON-enkoodaukselle PHP:ssä välttämätön.

pistemies [11.10.2011 20:33:26]

Laitampa koko homman tähän.

  if (window.XMLHttpRequest) {
			        xmlhttp=new XMLHttpRequest();
			    }
			    else {
			        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			    }

			 if(typeof JSON != "object") JSON = {};
				if (typeof JSON.parse != "function") {
				  JSON.parse = function(str) {
				    return eval("(" + str + ")");
				  };
				}

				  var tiedot = JSON.parse(xmlhttp.responseText);

              document.getElementById("tiedosto-valinta").innerHTML=tiedot.valikko;
              riviText = tiedot.rivit;

			    xmlhttp.open("GET","aja/searchRows.php?numero="+myNumber+"&rivi="+thisFile+"&row="+copyToFile+"&row2="+copyToFile2,true);
			    xmlhttp.send();

Testasin, niin php-tiedostossa se tulostaa nuo asiat, tosin ei kunnolla, sotkee tuo array-homma ulkoasua.

Metabolix [11.10.2011 20:36:56]

... ja sitten sulattele se järkesi jäästä ja kerro, mitä xmlhttp.responseText ylipäänsä tekee tuolla ennen pyynnön lähettämistä. :) Vertaa koodia alkuperäiseen versioosi, niin toivottavasti huomaat, mitkä tärkeät rivit ovat hävinneet matkalla.

Oikeasti, voi sitä koodia vähän yrittää ymmärtääkin, jos meinaa jotain koodata. Ei ole kovin hyvä lähestymistapa ongelmiin, että kopioidaan jostain yksi koodi ja korvataan siitä satunnaisen mittainen pala toisella miettimättä yhtään, mitä ne rivit tekevät. (Tuntuu jopa, että olet hieman taantunut viimeisen vuoden tai parin aikana.) Jos AJAXin toimintaperiaate on epäselvä, lue edes AJAX-opas.

pistemies [11.10.2011 20:49:01]

Oho. Tämä on kadonnu...

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200){

pistemies [11.10.2011 22:26:12]

pistemies kirjoitti:

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200){

Sain tämän toimimaan, kun laitoin tuon JSON jutun tuon funktion sisään. Kiitos!

Sivun alkuun

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät