Form submit zonder refresh
ik ben al een tijd opzoek naar een javascript/AJAX script dat een formulier verzendt zonder dat de pagina hoeft te worden herladen en dat de data kan worden verwerkt met PHP zoals in een database zetten.
Ik weet dat het mogelijk is, en ik heb al op internet gezocht. Ik heb ook vanalles gevonden maar het is te uitgebreid. De scripts die ik op internet vind zijn met formuliervalidaties of onnodige (lelijke) effecten en ik hoef aleen maar een formulier te verzenden, niet te controleren enz..
Weet iemand een link naar zo'n script?
Ik heb namelijk aleen verstand van server side scripttalen.
volgens mij wat je ook doet bij een input in een database moet een pagina een event uitvoeren wil je dat er iets gebeurt. dan herlaad de pagina automatisch.
Ik doe het met jQuery (in mijn geval laad ik jquery vanaf een Google domein. Je kan dit zo laten, of je downloadt het ...)
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$sql = "INSERT INTO my_table (phone, mail, site) VALUES (
'" . mysql_real_escape_string($_POST['phone']) . "',
'" . mysql_real_escape_string($_POST['mail']) . "',
'" . mysql_real_escape_string($_POST['site']) . "'
)";
// ... verder afhandelen
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) { // indien het een AJAX request is
echo 'Berichtje van het Ajax front. $sql: <br/>' . $sql; // hier kan je bv. de gebruiker verwittigen dat het gelukt is of niet
exit; //
}
else { // wie weet heeft de gebruiker javascript af gezet. Op deze manier vangen we dit ook op
// eventueel doe je hier verder nog iets ...
header('location: index.php');
}
}
?>
<html>
<head>
<title>Ajax formulier met jQuery - voorbeeld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<form id="my_form" method="post" action="index.php">
<input name="phone" /> Telefoonnummer<br/>
<input name="mail" /> e-mail<br/>
<input name="site" /> site<br/>
<input type="submit" value="OK"/>
</form>
<p id="message">Hier komt straks een bericht</p>
</body>
</html>
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$sql = "INSERT INTO my_table (phone, mail, site) VALUES (
'" . mysql_real_escape_string($_POST['phone']) . "',
'" . mysql_real_escape_string($_POST['mail']) . "',
'" . mysql_real_escape_string($_POST['site']) . "'
)";
// ... verder afhandelen
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])) { // indien het een AJAX request is
echo 'Berichtje van het Ajax front. $sql: <br/>' . $sql; // hier kan je bv. de gebruiker verwittigen dat het gelukt is of niet
exit; //
}
else { // wie weet heeft de gebruiker javascript af gezet. Op deze manier vangen we dit ook op
// eventueel doe je hier verder nog iets ...
header('location: index.php');
}
}
?>
<html>
<head>
<title>Ajax formulier met jQuery - voorbeeld</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<form id="my_form" method="post" action="index.php">
<input name="phone" /> Telefoonnummer<br/>
<input name="mail" /> e-mail<br/>
<input name="site" /> site<br/>
<input type="submit" value="OK"/>
</form>
<p id="message">Hier komt straks een bericht</p>
</body>
</html>
js.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(e) { // op het moment dat alle HTML-elementen geladen zijn (klaar voor de DOM), gaan we volgende functie uitvoeren:
$('#my_form').submit(function(e) { // op het moment dat de gebruiker het formulier probeert te verzenden, neemt javascript het over. Dan doen we dit:
e.preventDefault(); // hiermee vertellen we: zorg er voor dat je niet uitvoert wat je normaal zou doen. Normaal wordt nu het formulier verzonden. Dit wordt hiermee dus vermeden. We zullen dus ook de pagina niet verlaten
// this is een object dat het "aangesproken" element bevat. In dit geval is dit dus <form id="my_form"></form>.
var data = $(this).serialize(); // de gegevens van het formulier worden hiermee gelezen en in een object gestoken; rekening houdend met de name
// nu gaan we een Ajax-verzoek doen
$.ajax({
type: 'post',
url: 'index.php',
data: data,
success: function(message) { // op het moment dat een Ajax verzoek met succes is beindigd, voeren we deze functie uit:
// message is een bericht dat van de server is is gestuurd. Dit kan van alles zijn
// laat ons dit bericht posten in de <p></p>
$('#message').html(message);
}
});
});
});
$('#my_form').submit(function(e) { // op het moment dat de gebruiker het formulier probeert te verzenden, neemt javascript het over. Dan doen we dit:
e.preventDefault(); // hiermee vertellen we: zorg er voor dat je niet uitvoert wat je normaal zou doen. Normaal wordt nu het formulier verzonden. Dit wordt hiermee dus vermeden. We zullen dus ook de pagina niet verlaten
// this is een object dat het "aangesproken" element bevat. In dit geval is dit dus <form id="my_form"></form>.
var data = $(this).serialize(); // de gegevens van het formulier worden hiermee gelezen en in een object gestoken; rekening houdend met de name
// nu gaan we een Ajax-verzoek doen
$.ajax({
type: 'post',
url: 'index.php',
data: data,
success: function(message) { // op het moment dat een Ajax verzoek met succes is beindigd, voeren we deze functie uit:
// message is een bericht dat van de server is is gestuurd. Dit kan van alles zijn
// laat ons dit bericht posten in de <p></p>
$('#message').html(message);
}
});
});
});
Gewijzigd op 05/03/2012 23:47:19 door Kris Peeters
voorbeeld
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
(function () {
('html').addClass ('js');
}
)();
('html').addClass ('js');
}
)();
en controleren of die class is meegekregen zo niet voer de php code o.i.d. uit zo ja voer de JS code uit
Wat je ook kan doen, is in geval van een ajax call de url een extra waarde meegeven, dus bv.
$.ajax({
type: 'post',
url: 'index.php?ajax=1',
...
Gewijzigd op 05/03/2012 23:59:00 door Kris Peeters
dan weetje dat js niet aan staat omdat hij de class niet ziet want de class wordt alleen gegeven als js aan staat.
De server heeft geen weet van wat javascript allemaal uitspookt bij de gebruiker.
Als de gebruiker een formulier post (klassieke methode), worden slechts een aantal gegevens naar de server gestuurd.
basically worden gegevens (van <input>, van <textarea>, ...) in aan array gezet, $array[name] = value. // sommige elementen reageren anders
Die array krijgt php ter beschikking, in $_POST
Alle andere dingen die gebeuren bij de gebruiker ... worden niet teruggekoppeld naar de server. De server weet daar niets van.
De gebruiker mag op dit moment de ethernetkabel uittrekken, zijn wireless afzetten, ... Javascript blijft functioneren.
De class van een HTML element zal je nooit terugvinden in een $_POST; noch elders.
Bij een Ajax-request open je een communicatielijn tussen javascript en de server. Ook hier zal er slechts beperkte communicatie zijn.
javascript zal slechts cunnuniceren via een URL en verder GET en POST variabelen (die GET-variabelen zitten in de url).
Ook hier dus zal javascript de server niet laten weten wat er allemaal gebeurd is met classes van HTML-elementen.
Als je wil zorgen dat php weet dat het verzoek een Ajax-verzoek is, doe je wat ik toonde.
Als je wil dat javascript zelf duidelijk maakt aan de server dat het een Ajax-verzoek uitvoert, moet je dat doen via een extra GET of POST variabele.
( * afhankelijk van de webbrowser ... hoe dat precies zit, moet je maar aan anderen vragen)
Gewijzigd op 06/03/2012 15:32:07 door Kris Peeters