mysql_query bij versturen bericht en melding
Nogsteeds weet ik (bijna) niks van Javascript en AJAX. Ik heb nu talloze query's, denk aan formulieren om dingen toe te voegen etc. Nu wil ik, zodra op de 'Level up' (Grondstoffen) en bij de 'Voeg toe' (Je kan vrienden en vijanden toevoegen), dat zodra je op de knop Voeg toe klikt, er een melding komt (In het groen indien gelukt, in het rood indien er iets fout is gegaan) voor de gebruiker bovenaan het scherm, zonder dat de pagina hoeft te vernieuwen. Ook moet er dan een query worden uitgevoerd.
Ik snap helaas weinig van Javascript en AJAX. Kan iemand mij uitleggen hoe dit moet? (En dan niet: Je hebt javascript en AJAX nodig, daar was ik wel achter).
Momenteel heb ik dit:
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
35
36
37
38
39
40
41
42
43
44
45
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
35
36
37
38
39
40
41
42
43
44
45
<?php
// Controleren of een speler Moderator, Leider of Eigenaar is
if($sg[6] == 9||$sg[6] == 8||$sg[6] == 4){
if(isset($_POST['Wijzigen'])){
$groeping = $_POST['vriend'];
if($sg[0] == $groeping){
echo 'Je kan je eigen Groep niet toevoegen!';
}
if($sg[0] != $groeping){
echo "Vriend <b><i>";
echo $groeping;
echo " </b></i>Toegevoegd. De Eigenaar/Eigenaren hebben een verzoek ontvangen ter acceptering van deze aanvraag.";
mysql_query("INSERT INTO berichten(van,vanid,gelezen,titel,wie,bericht,datum,tijd) VALUES ('Systeem','0','0','De groep $groeping heeft een verzoek verstuurd.','')");
mysql_query("INSERT INTO Groepen_status(Groep_begin,Groep_eind,Status,Keuring) VALUES ('$sg[0]','$groeping','Vriend','Wacht op K')");
}
}
if(isset($_POST['Wijzigen2'])){
$groeping = $_POST['vijand'];
if($sg[0] == $groeping){
echo 'Je kan je eigen Groep niet toevoegen!';
}
if($sg[0] != $groeping){
echo "Vriend <b><i>";
echo $groeping;
echo " </b></i>Toegevoegd. Vanaf nu staat deze in het Vijanden overzicht";
}
}
if(!isset($_POST['Wijzigen665'])){
if(!isset($_POST['Wijzigen666'])){
$iit=mysql_query("SELECT Groep_naam FROM Groepen WHERE first='1'");
echo "<form method='POST' action=''>Vrienden Toevoegen:<br><select name='vriend'>";
while($roww=mysql_fetch_array($iit)){
echo "<option value='$roww[0]'>$roww[0]</option>";
}
echo "</select><br><input type='submit' name='Wijzigen' value='Toevoegen aan Vrienden'></form>";
$iit2=mysql_query("SELECT Groep_naam FROM Groepen WHERE first='1'");
echo "<br><br><form method='POST' action=''>Vijanden Toevoegen:<br><select name='vijand'>";
while($row=mysql_fetch_array($iit2)){
echo "<option value='$row[0]'>$row[0]</option>";
}
echo "</select><br><input type='submit' name='Wijzigen2' value='Toevoegen aan Vijanden'></form>";
}
}
}
?>
// Controleren of een speler Moderator, Leider of Eigenaar is
if($sg[6] == 9||$sg[6] == 8||$sg[6] == 4){
if(isset($_POST['Wijzigen'])){
$groeping = $_POST['vriend'];
if($sg[0] == $groeping){
echo 'Je kan je eigen Groep niet toevoegen!';
}
if($sg[0] != $groeping){
echo "Vriend <b><i>";
echo $groeping;
echo " </b></i>Toegevoegd. De Eigenaar/Eigenaren hebben een verzoek ontvangen ter acceptering van deze aanvraag.";
mysql_query("INSERT INTO berichten(van,vanid,gelezen,titel,wie,bericht,datum,tijd) VALUES ('Systeem','0','0','De groep $groeping heeft een verzoek verstuurd.','')");
mysql_query("INSERT INTO Groepen_status(Groep_begin,Groep_eind,Status,Keuring) VALUES ('$sg[0]','$groeping','Vriend','Wacht op K')");
}
}
if(isset($_POST['Wijzigen2'])){
$groeping = $_POST['vijand'];
if($sg[0] == $groeping){
echo 'Je kan je eigen Groep niet toevoegen!';
}
if($sg[0] != $groeping){
echo "Vriend <b><i>";
echo $groeping;
echo " </b></i>Toegevoegd. Vanaf nu staat deze in het Vijanden overzicht";
}
}
if(!isset($_POST['Wijzigen665'])){
if(!isset($_POST['Wijzigen666'])){
$iit=mysql_query("SELECT Groep_naam FROM Groepen WHERE first='1'");
echo "<form method='POST' action=''>Vrienden Toevoegen:<br><select name='vriend'>";
while($roww=mysql_fetch_array($iit)){
echo "<option value='$roww[0]'>$roww[0]</option>";
}
echo "</select><br><input type='submit' name='Wijzigen' value='Toevoegen aan Vrienden'></form>";
$iit2=mysql_query("SELECT Groep_naam FROM Groepen WHERE first='1'");
echo "<br><br><form method='POST' action=''>Vijanden Toevoegen:<br><select name='vijand'>";
while($row=mysql_fetch_array($iit2)){
echo "<option value='$row[0]'>$row[0]</option>";
}
echo "</select><br><input type='submit' name='Wijzigen2' value='Toevoegen aan Vijanden'></form>";
}
}
}
?>
Maar dit gaat natuurlijk met vernieuwen...
Als er vragen zijn hoor ik het graag en alvast reuze bedankt voor de antwoorden!
Laat me even tonen hoe Ajax werkt. Het database gedeelte negeer ik even.
Wat ik toon (gedeeltelijk jouw formulier) is 1 <select>, 1 knop.
De gebruiker klikt op de knop -> javascript neemt de controle over en stopt het verzenden van het formulier.
We versturen de gekozen option van de select naar de server, via Ajax
Het meeste commentaar zit tussen de code.
Je kan deze code copy/pasten naar een leeg .php bestand; zonder enige aanpassing.
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') { // detecteert of een formulier net verzonden is
// Als voorbeeld: indien Ken of Guile gekozen zijn, spreken we van een success. Dan sturen we een "1" naar javascript terug; (anders "0").
if ($_POST['vijand'] === "Ken" || $_POST['vijand'] === "Guile") {
echo '1';
}
else {
echo '0';
}
exit; // na een Ajax verzoek stop je alles met exit. Anders wordt de rest van dit script ook uitgevoerd en naar javascript gestuurd
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="POST" action="">
Vijanden Toevoegen: Ik raad je aan om Ken of Guile te kiezen<br>
<select name="vijand">
<option value="Ryu">Ryu</option>
<option value="Ken">Ken</option>
<option value="Guile">Guile</option>
<option value="Dhalsim">Dhalsim</option>
<option value="Chun-Li">Chun-Li</option>
<option value="Zangief">Zangief</option>
</select>
<input type="button" name="Wijzigen2" value="Toevoegen aan Vijanden">
<div id="messages"></div>
</form>
<script>
$(document).ready(function() { // wordt uitgevoerd wanneer de pagina (de DOM) geladen is
// Nu gaan we activiteiten van de gebruiker opvangen.
// Bij het drukken op de submit, kapen we de normale werking, en doen we "ons ding" in de plaats
$('input[name=Wijzigen2]').click(function(e) { // luistert naar een click op name="Wijzigen2"
e.preventDefault(); // dit houdt de submit tegen, zo wordt de pagina niet ververst.
// De vijand:
var de_vijand = $('select[name=vijand]').val(); // .val() geeft de value
// We verzenden het formulier met ajax
$.ajax({
url: '', // lege string: dan wordt verzonden naar de zelfde url als waarop het formulier staat
type: 'post', // 'post' ofwel 'get'
data: {
vijand: de_vijand // dit komt tevoorschijn als $_POST['vijand']
},
success: function(message) { // deze functie wordt uitgevoerd wanneer het Ajax-verzoek een antwoord terug krijgt van de server. De echo die de server mee stuurt, staat nu dus in de variabele message
if (message == 1) {
$('#messages').css({
color: 'green'
});
$('#messages').html('Alles goed gelukt!');
}
else {
$('#messages').css({
color: 'red'
});
$('#messages').html('Er is iets fout gelopen');
}
}
});
})
});
</script>
if ($_SERVER['REQUEST_METHOD'] === 'POST') { // detecteert of een formulier net verzonden is
// Als voorbeeld: indien Ken of Guile gekozen zijn, spreken we van een success. Dan sturen we een "1" naar javascript terug; (anders "0").
if ($_POST['vijand'] === "Ken" || $_POST['vijand'] === "Guile") {
echo '1';
}
else {
echo '0';
}
exit; // na een Ajax verzoek stop je alles met exit. Anders wordt de rest van dit script ook uitgevoerd en naar javascript gestuurd
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="POST" action="">
Vijanden Toevoegen: Ik raad je aan om Ken of Guile te kiezen<br>
<select name="vijand">
<option value="Ryu">Ryu</option>
<option value="Ken">Ken</option>
<option value="Guile">Guile</option>
<option value="Dhalsim">Dhalsim</option>
<option value="Chun-Li">Chun-Li</option>
<option value="Zangief">Zangief</option>
</select>
<input type="button" name="Wijzigen2" value="Toevoegen aan Vijanden">
<div id="messages"></div>
</form>
<script>
$(document).ready(function() { // wordt uitgevoerd wanneer de pagina (de DOM) geladen is
// Nu gaan we activiteiten van de gebruiker opvangen.
// Bij het drukken op de submit, kapen we de normale werking, en doen we "ons ding" in de plaats
$('input[name=Wijzigen2]').click(function(e) { // luistert naar een click op name="Wijzigen2"
e.preventDefault(); // dit houdt de submit tegen, zo wordt de pagina niet ververst.
// De vijand:
var de_vijand = $('select[name=vijand]').val(); // .val() geeft de value
// We verzenden het formulier met ajax
$.ajax({
url: '', // lege string: dan wordt verzonden naar de zelfde url als waarop het formulier staat
type: 'post', // 'post' ofwel 'get'
data: {
vijand: de_vijand // dit komt tevoorschijn als $_POST['vijand']
},
success: function(message) { // deze functie wordt uitgevoerd wanneer het Ajax-verzoek een antwoord terug krijgt van de server. De echo die de server mee stuurt, staat nu dus in de variabele message
if (message == 1) {
$('#messages').css({
color: 'green'
});
$('#messages').html('Alles goed gelukt!');
}
else {
$('#messages').css({
color: 'red'
});
$('#messages').html('Er is iets fout gelopen');
}
}
});
})
});
</script>