Overovanie pola pomocou php a AJAXu

Unlink · Napísal **Unlink**: 29.07.2009 8:46 | Overovanie pola pomocou php a AJAXu

Ahojte, povedzme že mám klasické input pole kde niečo napíšem a kliknem vedľa (onblur) sa mi povedzme pod tým zobrazí div v ktorom sa spustí určitá php funkcia,

proste potrebujem aby sa vždy keď kliknem vedľa toho môjho pola aby sa v tom dive spustila tá funkcia, s parametrom toho čo mam v poli napísané

a povedzme kým sa php skript nenačíta tak bude písať Loading
pretože tá funkcia sa bude vykonávať určitu dobu

Ďakujem

jozef.rusnak

Odporucam pouzit nejaky framework napr. prototype (jquery, mootols atd.):

http://www.prototypejs.org/learn/introduction-to-ajax

ak tomu inputu das id tak potom je lahke k tomu pristupovat....

napr.

<input name="in" id="in" value ="xxx" />

ak das v JS alert($F('in')) malo by ti vypisat 'xxx' resp. co tam zmenis.

Ďuri · Napísal **Ďuri**: 29.07.2009 15:36 | Overovanie pola pomocou php a AJAXu

Neodporucam pouzit ziaden framework, nic sa nenaucis a bude sa to vykonavat pomalsie.
Proste tomu inputu pridelis onblur="funkcia()", pricom funkcia bude obsahovat:

na zaciatku vytvori box s napisom Loading
spusti normalny http request GET metodou
ked bude readyState==4, teda vsetko prebehlo, obsah toho boxu sa nahradi responseText-om, teda tym, co vypisala ta php funkcia. Pokial nema ta fcia vypisovat nic, ten box sa proste odstrani (a v podstate vtedy moze http request prebehnut HEAD metodou, netreba GET)

Mozem sa na to pozriet a potom ti sem hodim kod, ak to nevies spravit sam.

jozef.rusnak

Kód:

Neodporucam pouzit ziaden framework, nic sa nenaucis a bude sa to vykonavat pomalsie. 

Suhlas, cez framework je to ale podstatne jednoduchsie a dramaticky pomalsie zase nie

Unlink

no tak vieš mi to nejak napísať?

lebo povedzme že ja potrebujem vykonať najakú funkcu ktorej výsledkom bude text

teda povedzme echo funkcia(hodnota);

Ďuri · Napísal **Ďuri**: 29.07.2009 16:33 | Overovanie pola pomocou php a AJAXu

Kód:

<!DOCTYPE html>
<title></title>
<meta charset=utf-8>
<style>
#loading { /*tu si mozes box s loadingom a neskor s vysledkom fcie lubovolne nastylovat*/ }
</style>
<script>
if (!window.XMLHttpRequest)
{
   XMLHttpRequest = function()
   {
      return new ActiveXObject('Microsoft.XMLHTTP');
   }
}
function ajax()
{
   if (!document.getElementById('loading'))
   {
      var div = document.createElement('div');
      div.setAttribute('id', 'loading');
      div.innerHTML = 'Loading';
      document.body.appendChild(div);
   }
   else
   {
      var div = document.getElementById('loading');
      div.innerHTML = 'Loading';
   }
   var xhr = new XMLHttpRequest();
   xhr.open('GET', 'tvojphpskript.php', true);
   xhr.send(null);
   xhr.onreadystatechange = function()
   {
      if (xhr.readyState == 4)
      {
         div.innerHTML = xhr.responseText;
         /* ten Loading ti preblikne mozno dost rychlo, podla toho, co tam mas v tom php skripte, tak si mozes nastavit setTimeout */
      }
   }
}
</script>
<input type=text onblur="ajax()">

jozef.rusnak - su tu taki uzivatelia, co s jQuery toho dokazu dost vela, ale obycajny javascript nepoznaju prakticky vobec. Preto nerad odporucam frameworky.

Unlink

ok toto ide, a teraz ako do toho dostanem svoje parametre?
potrebujem tam dostať jedno číslo, vegenerované php kódom, povedzme premennu $cislo
a to čo užívateľ vložil do toho poľa, ako na to?

to $cislo by asi šlo aj takto

Kód:

xhr.open('GET', 'tvojphpskript.php?cilso=<?php echo $cislo; ?>', true);

ale ten text by som radšej posielal cez post nie GET

dúfam že chápeš

Ďuri · Napísal **Ďuri**: 29.07.2009 18:04 | Overovanie pola pomocou php a AJAXu

Kód:

   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'tvojphpskript.php', true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   if (xhr.overrideMimeType)
   {
      xhr.setRequestHeader('Connection', 'close');
   } 
   xhr.send('cislo='+encodeURIComponent('nejaka hodnota')); 

Unlink

ok to funguje
ale ešte potrebujem to čo je v tom poli odoslať do skriptu

Kód:

<!DOCTYPE html>
<title></title>
<meta charset=utf-8>
<style>
#loading { /*tu si mozes box s loadingom a neskor s vysledkom fcie lubovolne nastylovat*/ }
</style>
<script>
if (!window.XMLHttpRequest)
{
   XMLHttpRequest = function()
   {
      return new ActiveXObject('Microsoft.XMLHTTP');
   }
}
function ajax()
{
   if (!document.getElementById('loading'))
   {
      var div = document.createElement('div');
      div.setAttribute('id', 'loading');
      div.innerHTML = 'Loading';
      document.body.appendChild(div);
   }
   else
   {
      var div = document.getElementById('loading');
      div.innerHTML = 'Loading';
   }
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'tvojphpskript.php', true);
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   if (xhr.overrideMimeType)
   {
      xhr.setRequestHeader('Connection', 'close');
   }
   xhr.send('cislo='+encodeURIComponent('nejaka hodnota'));
   xhr.onreadystatechange = function() 
   {
      if (xhr.readyState == 4)
      {
         div.innerHTML = xhr.responseText;
         /* ten Loading ti preblikne mozno dost rychlo, podla toho, co tam mas v tom php skripte, tak si mozes nastavit setTimeout */
      }
   }
}
</script>
<input type=text onblur="ajax()">

Ďuri · Napísal **Ďuri**: 29.07.2009 19:03 | Overovanie pola pomocou php a AJAXu

Odoslat "do skriptu" mozes jedine vypisanim (echo) v tom php skripte, to vypisane mas v xhr.responseText.
Mozno, keby si vypisal PHPckom nieco taketo:

Kód:

{prvyindex: 'prvahodnota', druhyindex: 'druhahodnota'}

tak by si mohol pomocou

Kód:

eval('var pole='+xhr.responseText+';');

vytvorit to javascriptove pole.
Osobne by som ale predavanie akychkolvek dat z PHP do JS riesil tak, ze PHPckom vygenerujem (well-formed) XML subor, ktorym by sa dalo javascriptom vyberat data klasicky DOMom. Akurat by si nepouzil xhr.responseText, ale xhr.responseXML.

Unlink

no dobre ale ako do toho skriptu to teda dám?
proste ako mam
xhr.send('cislo='+encodeURIComponent('nejaka hodnota'));

tak potrebujem odoslať ešte jednu hodnotu a to tú čo je v mojom poli ( v tom inpunte)
lebo ja JS nechápem, ja som skôr na php takže prosím skús mi to spraviť

Ďakujem

Ďuri · Napísal **Ďuri**: 29.07.2009 19:42 | Overovanie pola pomocou php a AJAXu

Rovnako ako ked spajas parametre v query stringu.

Kód:

xhr.send('premenna1='+encodeURIComponent('hodnota1')+'&premenna2='+encodeURIComponent('hodnota2'));

emer · Napísal **emer**: 29.07.2009 21:10 | Overovanie pola pomocou php a AJAXu

Ďuri píše:

/* ten Loading ti preblikne mozno dost rychlo, podla toho, co tam mas v tom php skripte, tak si mozes nastavit setTimeout */

já by som sa chcel opýtať, či sa nejako dá zistiť, ako dlho trvalo to spracovanie, aby som nastavil ten timeout iba v prípade, že preberanie výsledku trvá fakt krátky čas...

hádam som to nenapísal jak mongol

Ďuri · Napísal **Ďuri**: 30.07.2009 9:06 | Overovanie pola pomocou php a AJAXu

Jasne, predtym, ako vytvoris objekt XMLHttpRequest-u, si zapis do nejakej premennej aktualny cas v mikrosekundach (google javascript microtime) a do druhej premennej zapises aktualny cas vnutri tej vetvy if (xhr.readyState == 4). Potom to len od seba odcitas a podla moznosti nastavis setTimeout.

Unlink

Ďuri píše:

Rovnako ako ked spajas parametre v query stringu.

Kód:

xhr.send('premenna1='+encodeURIComponent('hodnota1')+'&premenna2='+encodeURIComponent('hodnota2'));

ok ale ja nechapem ako dosiahnem to že v encodeURIComponent('hodnota2') bude to čo mam napísané v tom poli

Ďuri · Napísal **Ďuri**: 09.08.2009 9:44 | Overovanie pola pomocou php a AJAXu

Viacerymi sposobmi...

Kód:

document.getElementById('id-inputu').value

Kód:

document.forms.nameformu.nameinputu.value

Unlink

ahoj, ešte by som chcel vedieť jednu vec
nedá sa nastaviť kódovanie?

nejak ako toto
xhr.open('GET', 'tvojphpskript.php', true);
proste kódovanie...

Ďuri · Napísal **Ďuri**: 12.08.2009 18:29 | Overovanie pola pomocou php a AJAXu

Neda. Javascript odosiela a prijima obsah v takom kodovani, v akom je ulozeny subor, ktory js skript obsahuje. Najlepsie je mat _vsetko_ v UTF-8 a mas po problemoch.

Unlink

a keď mam všetko v
Windows-1250? a nefunguje mi to?
nedá sa to nejak obísť?

Ďuri · Napísal **Ďuri**: 12.08.2009 18:46 | Overovanie pola pomocou php a AJAXu

Ktore znaky sa nespravne zobrazuju? Ale mozes vyskusat

Kód:

xhr.overrideMimeType("text/html;charset=Windows-1250");

Unlink

okej vložil som to za

Kód:

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

a funguje, ešte potrebujem aj naopak že to čo zadám do poľa že sa odošle v Windows-1250

Unlink

ok to som vyriešil tak že som si to prekonvertoval v php...

a teraz neviete mi poradiť že prečo mi to nejde na Opere a ani na IE
na FF a GoogleChrome to ide v pohode?

ale keď mam stranku v UTF-8 a nepoužijem xhr.overrideMimeType("text/html;charset=Windows-1250"); tak to ide aj v opere a aj v IE ...

Ďuri · Napísal **Ďuri**: 13.08.2009 18:52 | Overovanie pola pomocou php a AJAXu

Aha, overrideMimeType funguje iba vo Firefoxe a Safari. Stale nechapem, preco si nedas vsetko do UTF-8.

Unlink

no dobre, to som vyriešil prekonverovaním vstupu aj výstupu, ale zaujíma ma

Kód:

if (xhr.overrideMimeType)
   {
      xhr.setRequestHeader('Connection', 'close');
   }

a si povedal že

Ďuri píše:

Aha, overrideMimeType funguje iba vo Firefoxe a Safari.

tak teraz neviem, ten skript mi správne pôjde len vo Firefoxe a Safari?

Ďuri · Napísal **Ďuri**: 14.08.2009 8:40 | Overovanie pola pomocou php a AJAXu

Nie, to Connection: close je riesenie nejakej chyby vo Firefoxe. A na identifikaciu, ci ide o Firefox, sa pouziva presne to overrideMimeType.

Overovanie pola pomocou php a AJAXu

Overovanie pola pomocou php a AJAXu

Podobné témy

pisanie do textoveho pola pomocou ajaxu

Mazanie súboru pomocou ajaxu

Formulár načítaný pomocou jQuery AJAXu

formular cez jquery kniznicu pomocou ajaxu a diakritika

tvorba XLS pomocou php

Inputs value pomocou PHP

.htaccess prihlasenie pomocou PHP

Vytvorenie Cache pomocou php

Ako tlačiť dokument pomocou PHP?

spustenie EXE suboru pomocou PHP

Upravovanie txt suboru pomocou php

ZMAZANIE FORA POMOCOU PHP FUSION

Automatické zálohy MysqlDb pomocou php

zlucenie 2 obrazkov pomocou php

Automaticke vytvorenie subdomeny pomocou PHP

zistenie typu serveru pomocou PHP