Tijden veranderen
GET method
Ik heb (alweer) een vraag. Ik stuiterde vanmiddag op een probleem waar ik maar geen antwoord kan vinden.
Mijn vraag:
Hoe kan ik op 1 pagina blijven. Dus dat ik bijvoorbeeld op http://JOUWDOMEIN.nl/index op de zelfde pagina kan blijven maar als ik op "Registreer" druk dat het registreer script komt en bij wachtwoord vergeten het script daarvoor komt, en natuurlijk de layout. Ik dacht dat het iets met AJAX te maken had? Of met JavaScript? Of was het met een GET method? Dat je dus http://JOUWDOMEIN.nl/index?action=registreren of http://JOUWDOMEIN.nl/index?action=";registreren".
Alvast bedankt voor alle hulp!
Allereerst kun je de scriptjes onderverdelen in server-side en client-side. PHP is server-side. Javascript is client-side. Ik hoop dat je begrijpt dat dit twee totaal verschillende dingen zijn. Waar PHP heel eventjes op de webserver draait alvorens er een antwoord naar de client verstuurd wordt draait javascript in de browser van de client NADAT antwoord van de server ontvangen is.
Hoe gaat dat met een standaard HTML formulier
Dit is in eerste instantie gewoon statische HTML.
Zoiets als
Code (php)
1
2
3
4
5
2
3
4
5
<form action="action_page.php" method="get">
Name:<br>
<input type="text" name="name"><br><br>
<input type="submit" value="Submit">
</form>
Name:<br>
<input type="text" name="name"><br><br>
<input type="submit" value="Submit">
</form>
Wanneer er echter op de submit button geklikt wordt dan wordt er een nieuw verzoek naar de webserver verstuurd met daarin de inhoud van de formuliervelden. Iets als
Code (php)
1
/action_page.php?name="Frank"
Nu kan de webserver (PHP) daar weer iets mee doen en een nieuw antwoord terugsturen. De pagina wordt ververst. De POST method werkt hetzelfde als de GET method enkel wordt de querystring in de header mee gestuurd in plaats van in de URL.
Veranderingen op de webpagina zonder refresh
Hier gebruiken we dan dus javascript voor. Dit kan niet met PHP!
Veranderingen op de webpagina zonder refresh maar wel met nieuwe gegevens die van de server af moeten komen
Dat is wat we AJAX noemen. Javascript stuurt een nieuw verzoek naar de webserver. Het antwoord dat nu terugkomt wordt echter niet door de browser verwerkt maar komt terug in de vorm van een variabele (of een object) in Javascript.
Als je iets wilt maken waarvoor geen refresh gewenst is dan moet je je als eerste afvragen of je wel gegevens van de webserver nodig hebt. Heb je dat inderdaad nodig: AJAX. Zo niet: Enkel javascript.
Waarschuwing tbv formulieren
Formulieren die verzonden worden met of zonder AJAX en door PHP verwerkt worden moet je ALTIJD in PHP valideren. Enkel javascript validatie volstaat niet. Javascript kan heel erg makkelijk uitgeschakeld of omzeild worden door IEDERE gebruiker.
Gewijzigd op 06/12/2016 19:27:07 door Frank Nietbelangrijk
Toevoeging op 07/12/2016 09:38:34:
Ik heb het nu werkend met JavaScript. Maar het lukt me niet voor een animate toe te voegen, dat ze er slow inkomen. Kan iemand mij hierbij helpen? PS: als ze javascript hebben geblokkeerd komt hier een melding van, en ook informatie hoe ze het moeten inschakelen voor alle sites of alleen voor deze.
JavaScript
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$( document ).ready(function() {
showLogin();
});
function showLogin()
{
document.getElementById("register").style.display = "none";
document.getElementById("forget").style.display = "none";
document.getElementById("login").style.display = "block";
}
function showRegister()
{
document.getElementById("login").style.display = "none";
document.getElementById("forget").style.display = "none";
document.getElementById("register").style.display = "block";
}
function showPassForget()
{
document.getElementById("login").style.display = "none";
document.getElementById("register").style.display = "none";
document.getElementById("forget").style.display = "block";
}
showLogin();
});
function showLogin()
{
document.getElementById("register").style.display = "none";
document.getElementById("forget").style.display = "none";
document.getElementById("login").style.display = "block";
}
function showRegister()
{
document.getElementById("login").style.display = "none";
document.getElementById("forget").style.display = "none";
document.getElementById("register").style.display = "block";
}
function showPassForget()
{
document.getElementById("login").style.display = "none";
document.getElementById("register").style.display = "none";
document.getElementById("forget").style.display = "block";
}
Form
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<button onClick="showRegister()">register</button>
<button onClick="showLogin()">Login</button>
<button onClick="showPassForget()">Pass forget</button>
<form action="" method="GET" id="register">
<input type="text" name="registreer" value="1"><br><br>
</form>
<form action="" method="GET" id="login">
<input type="text" name="registreer" value="2"><br><br>
<input type="text" name="registreer" value="3"><br><br>
</form>
<form action="" method="GET" id="forget">
<input type="text" name="registreer" value="2"><br><br>
<input type="text" name="registreer" value="5"><br><br>
</form>
<button onClick="showLogin()">Login</button>
<button onClick="showPassForget()">Pass forget</button>
<form action="" method="GET" id="register">
<input type="text" name="registreer" value="1"><br><br>
</form>
<form action="" method="GET" id="login">
<input type="text" name="registreer" value="2"><br><br>
<input type="text" name="registreer" value="3"><br><br>
</form>
<form action="" method="GET" id="forget">
<input type="text" name="registreer" value="2"><br><br>
<input type="text" name="registreer" value="5"><br><br>
</form>
Gewijzigd op 07/12/2016 09:40:34 door - Rob -