| Autor | Zpráva | ||
|---|---|---|---|
| kuku Profil * |
#1 · Zasláno: 22. 11. 2010, 23:13:11
Dobrý den,
mohl bych poprosit o radu. Podle jedné knížky jsem se pokusil implementovat kód, který pomocí metody GET vrátí hodnoty z Textboxů do divu "odpoved serveru". Bohužel však v knížce již neukazují jak vytvořit stranu serveru. Nedokázal by někdo vysvětlit nebo napsat jak tuto část vytvořit?Předem moc díky.
<!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>Odeslání požadavku metodou GET a POST</title>
<script type="text/javascript">
var xmlhttp;
function vytvorXMLHttpRequest(){
if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
}
function vytvorDotazovaciRetezec(){
var jmeno = document.getElementById("jmeno").value;
var prijmeni = document.getElementById("prijmeni").value;
var datumNaroz = document.getElementById("datumNaroz").value;
var dotazovaciRetezec = "jmeno=" + jmeno + "&prijmeni=" + prijmeni + "&datumNaroz=" + datumNaroz;
return dotazovaciRetezec();
}
function provedPozadavekGET(){
vytvorXMLHttpRequest();
var dotazovaciRetezec = "prikladGetAPost?";
dotazovaciRetezec = dotazovaciRetezec + vytvorDotazovaciRetezec() + "&casZnamka=" + new Date().getTime();
xmlhttp.onreadystatechange = zpracujeZmenuStavu;
xmlhttp.open("GET",dotazovaciRetezec,true);
xmlhttp.send(null);
}
function zpracujZmenuStavu(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
zpracujVysledky();
}
}
}
function zpracujVysledky(){
var odpovedDiv = document.getElementById("odpovedServeru");
if(odpovedDiv.hasChildNodes()){
odpovedDiv.removeChild(odpovedDiv.childNodes[0]);
}
var textOdpovedi = document.createTextNode(xmlhttp.responseText);
odpovedDiv.appendChild(textOdpovedi);
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Jméno:</td>
<td><input type="text" id="jmeno" /></td>
</tr>
<tr>
<td>Příjmení:</td>
<td><input type="text" id="prijmeni" /></td>
</tr>
<tr>
<td>Datum Narození:</td>
<td><input type="text" id="datumNaroz" /></td>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="GET" onclick="provedPozadavekGET();" /><br />
<input type="button" value="GET" onclick="provedPozadavekPOST();" />
</form><br />
<h2>Odpověď serveru:</h2>
<div id="odpovedServeru"></div>
</body>
</html>
|
||
| ShiraNai7 Profil |
#2 · Zasláno: 23. 11. 2010, 12:59:41
Skript v server.php zpracuje data zaslana do $_GET ci $_POST a vysledek by mel vypsat normalne na vystup. Co jsem koukal tak to bere jen cisty text.
|
||
| kuku Profil * |
#3 · Zasláno: 23. 11. 2010, 14:18:02
Asi by jsi nedokázal napsat ukázku kódu jak by to mělo vypadat?Mělo by to jen vypsat text co se zadá do textboxů.
|
||
| ShiraNai7 Profil |
#4 · Zasláno: 23. 11. 2010, 15:21:43
<?php if(!empty($_POST)) print_r($_POST); else print_r($_GET); ?> |
||
| kuku Profil * |
#5 · Zasláno: 23. 11. 2010, 18:10:02
No tohle možná bude ono. Asi bych to měl uvést na pravou míru. Snažím se trošku přojít na kloub AJAXU a asynchronní komunikaci. Já se asi zase hloupě zeptám, ale tento kus kódu vložím do souboru server.php, ale jak a kde bych na něj měl odkázat aby mi to vrátilo požadované hodnoty?
|
||
| ShiraNai7 Profil |
#6 · Zasláno: 23. 11. 2010, 18:49:30
Pokud netrváš na tom vynalézat znovu už 100x udělané, tak použij knihovnu jQuery. Tam se s ajaxem pracuje jednoduše, aniž bys musel řešit nějaké základní technické detaily.
|
||
| kuku Profil * |
#7 · Zasláno: 23. 11. 2010, 19:11:41
No to určitě netrvám, jen pokud použiji knihovnu jquery, budu moci pracovat jako v klasickém Javascript - stejné funkce, prvky ala innerHtml atd., nebo použití jquery znamená, prostě pracovat už čistě jen s jquery?
|
||
| kuku Profil * |
#8 · Zasláno: 23. 11. 2010, 19:14:54
Jde mi prostě jen o to, pochopit jak funkce asynchronní komunikace, vytáhnout si něco z databáze a někam to uložit, tohle je můj cíl co bych se chtěl naučit a na těchto znalostech dál stavět.
|
||
| Chamurappi Profil |
#9 · Zasláno: 23. 11. 2010, 19:18:59
Reaguji na ShiraNaiho7:
„Pokud netrváš na tom vynalézat znovu už 100x udělané, tak použij knihovnu jQuery“ Vždyť on už to také má udělané, nepotřebuje tahat balík dalších funkcí. Reaguji na kuku: „nebo použití jquery znamená, prostě pracovat už čistě jen s jquery?“ Neznamená, jQuery je jen jedna přerostlá funkce/objekt. |
||
| Radovan789 Profil * |
#10 · Zasláno: 23. 11. 2010, 19:41:22
Chamurappi:
jQuery je jen jedna přerostlá funkce/objekt. Má jen 26KB. To že někdo vytvořil kvalitní JS knihovnu tak ho hned nemusíš odsuzovat, muselo to dát hodně práce a hlavně je kompatibilní s mnoha prohlížeči. Takže pro tento příklad bych AJAX přes jQuery doporučoval. |
||
| _es Profil |
#11 · Zasláno: 23. 11. 2010, 20:00:19
Radovan789:
„Má jen 26KB“ … skomprimovaného kódu, ktoré musí prehliadač spracovať - interpretovať/skompilovať. „Takže pro tento příklad bych AJAX přes jQuery doporučoval.“ Len pre tento príklad je jQuery výrazne nadbytočná. „muselo to dát hodně práce“ To nie je rozumný argument. „hlavně je kompatibilní s mnoha prohlížeči“ Objekt XMLHttpRequest je funkčný (kompatibilnejší) v ešte viac prehliadačoch.
|
||
| Chamurappi Profil |
#12 · Zasláno: 23. 11. 2010, 20:02:22 · Upravil/a: Chamurappi
Reaguji na Radovana789:
„Má jen 26KB.“ … čímž se řadí mezi velké. Jak často píšeš funkci, která má víc jak 10 kB? Zde zmíněné kilo a půl je menší. „tak ho hned nemusíš odsuzovat, muselo to dát hodně práce“ Irelevantní. Zde nikoho neodsuzuji. „hlavně je kompatibilní s mnoha prohlížeči“ On už přeci má funkční JS, nehledá za něj náhradu, hledá k němu serverovou část. |
||
| kuku Profil * |
#13 · Zasláno: 23. 11. 2010, 20:23:59
Pánové děkuji za reakce, určitě se v této problematice vyznáte lépe. Jak píše Chamurappi - jedná se mi o vytvoření serverové části nejlépe v PHP, vydět jak to mezi sebou komunikuje atd. Pokud se na to použije Jquery nebo klasický ajax, nechám si poradit, ale podle toho jak to ted mám napsané, by bylo asi dobré zkusit to vytvořit pomocí klasického ajaxu a poté to kdyžtak transformovat do jquery.
|
||
| Radovan789 Profil * |
#14 · Zasláno: 23. 11. 2010, 20:26:20
_es, Chamurappi:
Jó pěkně jste se do mě pustily :-( , já bych doporučoval stáhnout Development verzi kódu a ztoho vytáhnout jen ten AJAX. Pak to moc velké nebude. Ale autor už stejně bude mít rozhodnuto. |
||
| _es Profil |
#15 · Zasláno: 23. 11. 2010, 20:42:30
kuku:
„a poté to kdyžtak transformovat do jquery“ "poté" to už potom predsa nemá význam, bolo by to kontraproduktívne. Skús sa takých radcov spýtať, ako jQuery funguje a ako je implementované, nie nejakú demagógiu o kompatibilite a jednoduchosti. Niektoré rady sa mi zdajú ako rada ťahať za autom vždy aj prívesný vozík - kvôli kompatibilite. |
||
| kuku Profil * |
#16 · Zasláno: 23. 11. 2010, 20:50:00
_es: Souhlasím s tebou. S tou kontraproduktivitou, by mi to ani nevadilo, já jen se pořád nechci opakovat, ale tohle není příklad na nějaké webové stránky, má to být takový moje malá učebnice jak si postavit v budoucnu aplikaci, které bude založená na asynchronní komunikaci klient-server.
|
||
| _es Profil |
#17 · Zasláno: 23. 11. 2010, 20:56:01
kuku:
„na asynchronní komunikaci klient-server.“ jQuery sa vôbec netýka serverovej časti, na ktorú si sa tu pýtal, ak ti nestačí rada v [#4], tak by si to mal upresniť. |
||
| Davex Profil |
#18 · Zasláno: 23. 11. 2010, 20:58:54 · Upravil/a: Davex
kuku:
Jak psal ShiraNai7, tak obslužný skript může udělat třeba jen to, že vypíše parametry: <?php print_r($_GET); Jméno skriptu musíš vyplnit před otazník na řádku: var dotazovaciRetezec = "prikladGetAPost?"; V kódu jsou ještě minimálně dva překlepy: return dotazovaciRetezec(); xmlhttp.onreadystatechange = zpracujeZmenuStavu; |
||
| kuku Profil * |
#19 · Zasláno: 23. 11. 2010, 21:19:58
Ano tohle by úplně stačilo, jen mi není nějak jasné jak se z hlavního skript co je v prvním topicku odkázat na server.php a ten aby následně vrátil hodnotu GET.
|
||
| Davex Profil |
#20 · Zasláno: 23. 11. 2010, 22:04:25
Skript server.php slouží pouze k tomu, aby poslal prohlížeči něco, co ten JavaScript zobrazí v některé části již načtené stránky. Proč bys na něj chtěl odkazovat?
|
||
| kuku Profil * |
#21 · Zasláno: 23. 11. 2010, 22:15:57
Já to asi špatně napsal nebo to spíš blbě chápu. Jednoduše řečeno, jak by se dali tyto dva soubory propoji,t aby to dělalo to co má?
|
||
| Davex Profil |
#22 · Zasláno: 23. 11. 2010, 22:40:01
Už jsem to tu psal. Které části nerozumíš? Zkusím to přeformulovat.
|
||
| kuku Profil * |
#23 · Zasláno: 23. 11. 2010, 22:49:06
Ten muj kód co je uplně nahoře není vůbec propojený s tím server.php. Jak je propojit?Jak můj kod ví, že existuje nějaký soubor s názvem server.php?Přece něco můsí příjmout a něco odeslat, ne?
Ukázka souborů: server.php <?php if(!empty($_POST)) print_r($_POST); else print_r($_GET); ?> metodaGetAPost.php
<!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>Odeslání požadavku metodou GET a POST</title>
<script type="text/javascript">
var xmlhttp;
function vytvorXMLHttpRequest(){
if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
}
function vytvorDotazovaciRetezec(){
var jmeno = document.getElementById("jmeno").value;
var prijmeni = document.getElementById("prijmeni").value;
var datumNaroz = document.getElementById("datumNaroz").value;
var dotazovaciRetezec = "jmeno=" + jmeno + "&prijmeni=" + prijmeni + "&datumNaroz=" + datumNaroz;
return dotazovaciRetezec();
}
function provedPozadavekGET(){
vytvorXMLHttpRequest();
var dotazovaciRetezec = "prikladGetAPost?";
dotazovaciRetezec = dotazovaciRetezec + vytvorDotazovaciRetezec() + "&casZnamka=" + new Date().getTime();
xmlhttp.onreadystatechange = zpracujeZmenuStavu;
xmlhttp.open("GET",dotazovaciRetezec,true);
xmlhttp.send(null);
}
function zpracujZmenuStavu(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
zpracujVysledky();
}
}
}
function zpracujVysledky(){
var odpovedDiv = document.getElementById("odpovedServeru");
if(odpovedDiv.hasChildNodes()){
odpovedDiv.removeChild(odpovedDiv.childNodes[0]);
}
var textOdpovedi = document.createTextNode(xmlhttp.responseText);
odpovedDiv.appendChild(textOdpovedi);
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Jméno:</td>
<td><input type="text" id="jmeno" /></td>
</tr>
<tr>
<td>Příjmení:</td>
<td><input type="text" id="prijmeni" /></td>
</tr>
<tr>
<td>Datum Narození:</td>
<td><input type="text" id="datumNaroz" /></td>
</tr>
</tbody>
</table>
<form action="#">
<input type="button" value="GET" onclick="provedPozadavekGET();" /><br />
<input type="button" value="GET" onclick="provedPozadavekPOST();" />
</form><br />
<h2>Odpověď serveru:</h2>
<div id="odpovedServeru"></div>
</body>
</html>
|
||
| Davex Profil |
#24 · Zasláno: 23. 11. 2010, 22:54:29
Bude to fungovat, když změníš
var dotazovaciRetezec = "prikladGetAPost?"; var dotazovaciRetezec = "server.php?"; Neopravil jsi nic z toho, co jsem už psal. |
||
| kuku Profil * |
#25 · Zasláno: 23. 11. 2010, 23:01:08
Moc díky!!!!!Tohle přesně jsem potřeboval. Chyby mám opravené, kód jsem překopírovával z prvního topicku, ten můj je ted různě upravený jak jsem to různě zkoušel.
|
||
|
Časová prodleva: 13 let
|
|||
0