POST request zonder refresh
Hier zie je een simpel voorbeeld hoe ik het nu heb :
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
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
<?php
if(isset($_POST['toevoegen'])) {
if (isset($_POST['naam'],$_POST['leeftijd'])) {
// </>
// Voeg toe aan database
// </>
$msg = 'Succesvol toegevoegd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($_POST['verwijderen'])) {
if (isset($_POST['naam'],$_POST['leeftijd'])) {
// </>
// Verwijder uit database
// </>
$msg = 'Succesvol verwijderd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($msg)) {
echo $msg;
}
?>
<form action="" method="post">
<label>Naam</label>
<input type="text" name="naam"/>
<label>Leeftijd</label>
<input type="number" name="leeftijd"/>
<button type="submit" name="toevoegen">Toevoegen</button>
<button type="submit" name="verwijderen">Verwijderen</button>
</form>
if(isset($_POST['toevoegen'])) {
if (isset($_POST['naam'],$_POST['leeftijd'])) {
// </>
// Voeg toe aan database
// </>
$msg = 'Succesvol toegevoegd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($_POST['verwijderen'])) {
if (isset($_POST['naam'],$_POST['leeftijd'])) {
// </>
// Verwijder uit database
// </>
$msg = 'Succesvol verwijderd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($msg)) {
echo $msg;
}
?>
<form action="" method="post">
<label>Naam</label>
<input type="text" name="naam"/>
<label>Leeftijd</label>
<input type="number" name="leeftijd"/>
<button type="submit" name="toevoegen">Toevoegen</button>
<button type="submit" name="verwijderen">Verwijderen</button>
</form>
Is het mogelijk op dit te draaien op submit zonder te refreshen ?
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(function() {
$(".toevoegen").click(function() {
$.ajax({ url: "action.php" }
});
});
$(function() {
$(".verwijderen").click(function() {
$.ajax({ url: "action.php" }
});
});
$(".toevoegen").click(function() {
$.ajax({ url: "action.php" }
});
});
$(function() {
$(".verwijderen").click(function() {
$.ajax({ url: "action.php" }
});
});
Gewijzigd op 01/12/2014 21:27:13 door Peter Louwer
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
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
<form id="userData">
<label>Team</label>
<input type="text" name="team"/>
<br>
<label>Punten</label>
<input type="number" name="punten"/>
<br>
<button type="submit" name="toevoegen">Toevoegen</button>
<button type="submit" name="verwijderen">Verwijderen</button>
</form>
<div id='response'></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#userData').submit(function(){
$('#response').html("<b>Laden...</b>");
$.post('action.php', $(this).serialize(), function(data){
$('#response').html(data);
}).fail(function() {
alert( "Oeps, iets ging verkeerd!" );
});
return false;
});
});
</script>
<label>Team</label>
<input type="text" name="team"/>
<br>
<label>Punten</label>
<input type="number" name="punten"/>
<br>
<button type="submit" name="toevoegen">Toevoegen</button>
<button type="submit" name="verwijderen">Verwijderen</button>
</form>
<div id='response'></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#userData').submit(function(){
$('#response').html("<b>Laden...</b>");
$.post('action.php', $(this).serialize(), function(data){
$('#response').html(data);
}).fail(function() {
alert( "Oeps, iets ging verkeerd!" );
});
return false;
});
});
</script>
action.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
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
<?php
if(isset($_POST['toevoegen'])) {
if (isset($_POST['team'],$_POST['punten'])) {
// </>
// Voeg punten toe aan database
// </>
$msg = 'Succesvol toegevoegd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($_POST['verwijderen'])) {
if (isset($_POST['team'],$_POST['punten'])) {
// </>
// Verwijder punten uit database
// </>
$msg = 'Succesvol verwijderd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($msg)) {
echo $msg;
} else {
echo 'Geen informatie...';
}
?>
if(isset($_POST['toevoegen'])) {
if (isset($_POST['team'],$_POST['punten'])) {
// </>
// Voeg punten toe aan database
// </>
$msg = 'Succesvol toegevoegd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($_POST['verwijderen'])) {
if (isset($_POST['team'],$_POST['punten'])) {
// </>
// Verwijder punten uit database
// </>
$msg = 'Succesvol verwijderd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($msg)) {
echo $msg;
} else {
echo 'Geen informatie...';
}
?>
Ik denk dat het met de submit te maken heeft :
"$('#userData').submit(function(){"
Toevoegen en Verwijderen moeten los van elkaar te gebruiken zijn.
Iemand tips ?
Gewijzigd op 01/12/2014 23:14:49 door Peter Louwer
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$.ajax({
url: "script.php,
cache: false,
success: function(html){
$(".result").empty().html(html);
},
error:function (xhr, ajaxOptions, thrownError){
$(".result").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
}
});
url: "script.php,
cache: false,
success: function(html){
$(".result").empty().html(html);
},
error:function (xhr, ajaxOptions, thrownError){
$(".result").empty().html('Er is een fout opgetreden:'+ xhr.status + ' '+ thrownError);
}
});
Gewijzigd op 01/12/2014 23:40:47 door - Ariën -
Code (php)
1
2
3
2
3
$('#userData').submit(function(){
/* Hier de snippet*/
});
/* Hier de snippet*/
});
Gewijzigd op 01/12/2014 23:41:06 door - Ariën -
Als iemand een directe oplossing heeft zou echt super zijn.
Mijn action.php kan niet zien op welke knop er is gedrukt :
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
////////////////////////////////////
// Check if add button is pressed //
////////////////////////////////////
if(isset($_POST['add'])) {
if (isset($_POST['team'],$_POST['points'])) {
// Add points
$message = 'Successfully added!';
} else {
$message = 'Please fill in all fields!';
}
}
///////////////////////////////////////
// Check if delete button is pressed //
///////////////////////////////////////
if(isset($_POST['delete'])) {
if (isset($_POST['team'],$_POST['points'])) {
// Delete points
$message = 'Successfully deleted!';
} else {
$message = 'Please fill in all fields!';
}
}
///////////////////
// Print message //
///////////////////
if(isset($message)) {
echo $message;
} else {
echo 'No data...';
}
?>
////////////////////////////////////
// Check if add button is pressed //
////////////////////////////////////
if(isset($_POST['add'])) {
if (isset($_POST['team'],$_POST['points'])) {
// Add points
$message = 'Successfully added!';
} else {
$message = 'Please fill in all fields!';
}
}
///////////////////////////////////////
// Check if delete button is pressed //
///////////////////////////////////////
if(isset($_POST['delete'])) {
if (isset($_POST['team'],$_POST['points'])) {
// Delete points
$message = 'Successfully deleted!';
} else {
$message = 'Please fill in all fields!';
}
}
///////////////////
// Print message //
///////////////////
if(isset($message)) {
echo $message;
} else {
echo 'No data...';
}
?>
Misschien post ik dit in de verkeerde sectie op phphulp omdat dit voornamelijk een jquery onderwerp is.
Dit is mijn index.php, weet iemand hoe ik deze twee acties ( add / delete ) kan onderscheiden?
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
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
<form id="userData">
<label>Team</label>
<input type="text" name="team"/>
<br>
<label>Points</label>
<input type="number" name="points"/>
<br>
<input type="submit" name="add" id="add" value="Add"/>
<input type="submit" name="delete" id="delete" value="Delete"/>
</form>
<div id='response'></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#userData').submit(function(){
$('#response').html("<b>Loading...</b>");
$.post('action.php', $(this).serialize(), function(data){
$('#response').html(data);
}).fail(function() {
alert( "Oops, something went wrong!" );
});
return false;
});
});
</script>
<label>Team</label>
<input type="text" name="team"/>
<br>
<label>Points</label>
<input type="number" name="points"/>
<br>
<input type="submit" name="add" id="add" value="Add"/>
<input type="submit" name="delete" id="delete" value="Delete"/>
</form>
<div id='response'></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$('#userData').submit(function(){
$('#response').html("<b>Loading...</b>");
$.post('action.php', $(this).serialize(), function(data){
$('#response').html(data);
}).fail(function() {
alert( "Oops, something went wrong!" );
});
return false;
});
});
</script>
Gewijzigd op 02/12/2014 03:11:32 door Peter Louwer
Probeer eens:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$('body').on('click', '#add', function (event){
event.preventDefault();
$('#response').html("<b>Loading...</b>");
$.post('action.php', $(this).serialize(), function(data){
if(data.myResult === 'succesfull') {
alert('Succes!');
} else {
alert('Oops...');
}
}, 'json');
});
event.preventDefault();
$('#response').html("<b>Loading...</b>");
$.post('action.php', $(this).serialize(), function(data){
if(data.myResult === 'succesfull') {
alert('Succes!');
} else {
alert('Oops...');
}
}, 'json');
});
In m'n array heb ikzelf ook nog een message zitten, waarin ik een bericht terugstuur, bijv. een sql error ofzo :)
Gewijzigd op 02/12/2014 07:44:22 door Dennis WhoCares
Redcoffe redcoffe op 02/12/2014 10:27:42:
In m'n array heb ikzelf ook nog een message zitten
Leg eens uit?
Gewijzigd op 02/12/2014 10:30:58 door - Ariën -
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
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$( "form" ).submit(function( event ) {
var data = $(this).serializeArray();
$.ajax({
type: 'post',
url: 'action.php',
data: data,
success: function (data) {
$('#main').html(data);
}
});
event.preventDefault();
});
});
</script>
<script type="text/javascript">
$(function() {
$( "form" ).submit(function( event ) {
var data = $(this).serializeArray();
$.ajax({
type: 'post',
url: 'action.php',
data: data,
success: function (data) {
$('#main').html(data);
}
});
event.preventDefault();
});
});
</script>
en dan kan je gewoon isset($_POST['naam'] en alles gebruiken, let op pas eventueel URL aan
Als dit het geval dan doe ik altijd print_r($_POST) dan weet ik wat er precies naar de action.php wordt gestuurd.
Aan de hand daarvan pas ik mijn if statement aan.
Ronald brt op 02/12/2014 10:41:47:
Volgens mij bedoelt ze als ze op verwijderen/bewerken klikt dat het niet de juiste if functie triggered ?
Als dit het geval dan doe ik altijd print_r($_POST) dan weet ik wat er precies naar de action.php wordt gestuurd.
Aan de hand daarvan pas ik mijn if statement aan.
Als dit het geval dan doe ik altijd print_r($_POST) dan weet ik wat er precies naar de action.php wordt gestuurd.
Aan de hand daarvan pas ik mijn if statement aan.
De IF functie werkt wel ik heb de code paar x doorgelezen, de vraag is hoe ze het laat uitvoeren zonder dat de pagina moet herladen
- Aar - op 02/12/2014 10:30:16:
Leg eens uit?
Redcoffe redcoffe op 02/12/2014 10:27:42:
In m'n array heb ikzelf ook nog een message zitten
Leg eens uit?
Mijn json arrays die ik terug stuur zijn altijd als volgt:
'result' => 'true',
'msg' => 'De knop is succesvol toegevoegd/aangepast/verwijderd'
Of
'result' => 'false',
'msg' => 'Kon de knop niet vinden!'
'result' => 'false',
'msg' => 'Er is een SQL fout opegetreden: ' . $this->sth->errorInfo();
Zo heb ik dus na de hand een foutcontrole in mijn eigen scripts met een success/warning/alert popup met de bijgaande message
[/quote]
De IF functie werkt wel ik heb de code paar x doorgelezen, de vraag is hoe ze het laat uitvoeren zonder dat de pagina moet herladen
[/quote]
Ze kan eventueel een hidden field maken in haar form.
Aan de hand van wat geklikt wordt, ( #add of #delete ) deze field invullen.
En daarop de IF eroverheen gooien.
Gewijzigd op 02/12/2014 11:10:04 door Dennis WhoCares
Maar het punt is dat Minouk niet moet triggeren op een form-ID, maar een id van een button.
in je 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e){
var clickName = e.target.name;
var send = $('#userData');
send.on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'action.php',
type: "POST",
data: send.serialize() + "&" + clickName + "=",
success: function(data) {
console.log(data)
resp = $('#response');
resp.html(data);
}
});
});
});
});
</script>
<script type="text/javascript">
$(function() {
$("button").click(function(e){
var clickName = e.target.name;
var send = $('#userData');
send.on('submit', function(e){
e.preventDefault();
$.ajax({
url: 'action.php',
type: "POST",
data: send.serialize() + "&" + clickName + "=",
success: function(data) {
console.log(data)
resp = $('#response');
resp.html(data);
}
});
});
});
});
</script>
in je action.php ook nog op empty checken
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
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
<?php
print_r($_POST);
if(isset($_POST['add'])) {
if (isset($_POST['team'],$_POST['punten']) && !empty($_POST['team']) && !empty($_POST['punten'])){
// </>
// Voeg punten toe aan database
// </>
$msg = 'Succesvol toegevoegd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($_POST['delete'])) {
if (isset($_POST['team'],$_POST['punten']) && !empty($_POST['team']) && !empty($_POST['punten'])) {
// </>
// Verwijder punten uit database
// </>
$msg = 'Succesvol verwijderd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($msg)) {
echo $msg;
} else {
echo 'Geen informatie...';
}
?>
print_r($_POST);
if(isset($_POST['add'])) {
if (isset($_POST['team'],$_POST['punten']) && !empty($_POST['team']) && !empty($_POST['punten'])){
// </>
// Voeg punten toe aan database
// </>
$msg = 'Succesvol toegevoegd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($_POST['delete'])) {
if (isset($_POST['team'],$_POST['punten']) && !empty($_POST['team']) && !empty($_POST['punten'])) {
// </>
// Verwijder punten uit database
// </>
$msg = 'Succesvol verwijderd!';
} else {
$msg = 'Vul alle verplichte velden in!';
}
}
if(isset($msg)) {
echo $msg;
} else {
echo 'Geen informatie...';
}
?>
Misschien kan het beter ben ook maar aan het leren :)
Ik heb voor een "leerling" van mij een stukje code geschreven die de URL uit de link haalt en zo een POST doet naar een script die iets verwijderd uit de database.
Misschien heb je er iets aan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(".verwijder").click(function() {
event.preventDefault();
// Get url from the actual link
var url = $(this).attr('href');
$.ajax({
url: url,
type: 'POST',
success: function(data) {
//called when successful
return true;
},
error: function(e) {
//called when there is an error
return true;
console.log('Fout bij verwijderen');
}
})
});
event.preventDefault();
// Get url from the actual link
var url = $(this).attr('href');
$.ajax({
url: url,
type: 'POST',
success: function(data) {
//called when successful
return true;
},
error: function(e) {
//called when there is an error
return true;
console.log('Fout bij verwijderen');
}
})
});
<input type="submit" name="add" id="add" value="Add"/>
<input type="submit" name="delete" id="delete" value="Delete"/>
in
<input type="button" name="toevoegen">Toevoegen</button>
<input type="button" name="verwijderen">Verwijderen</button>
Omdat je form tags hebt zal je submit namelijk altijd je formulier versturen. Dit kun je oplossen door :
<input type="submit" name="add" id="add" value="Add" onclick="return false;"/>
<input type="button" name="add" id="add" value="Add"/>
De eerste oplossing zorgt er voor dat je pagina direct na het versturen weer stopt. De tweede zorgd er voor dat het helemaal niet word verstuurd, maar dat alleen de javascript onclick word uitgevoerd
Je kan daarna met JavaScript of Jquery afhandelen welke actie eraan gekoppeld wordt.
Ik heb Ronalds voorbeeld geprobeerd maar wilt helaas niet werken.
Als ik de print_r($_POST); functie gebruik krijg ik inderdaad de waarden te zien :
"Array ( [team] => team [points] => 13 )"
Maar alsnog kan ik de waarden van de button/submit niet onderscheiden.
Ook de post query in de url te zien ( Dit wil ik graag voorkomen ).
Wat Rickert beschrijft begrijp ik volkomen en zal ook misschien beter zijn voor dit soort simpele functies.
Ook dat wil ik graag vermijden omdat ik queries en url data graag wil verbergen.
Mijn einddoel is uiteindelijk om de action.php al het "check" werk te laten doen met if's en else :d
Jacco's suggestie werkt helaas niet voor mij, misschien omdat ik ook geen idee heb hoe ik dat alsnog kan doorgeven naar de action.php
Het is vervelend omdat ik zo dichtbij ben maar alsnog de "add" en "delete" niet kan vinden/onderscheiden in de action.php
Toch bedankt allemaal voor de suggesties en aandacht, phphulp is awesome!
Gewijzigd op 02/12/2014 17:17:35 door Peter Louwer
Voorbeeld, http://bit.ly/1vcR6eu
<input type="submit" name="toevoegen" value="toevoegen"/>
<input type="submit" name="verwijderen" value="verwijderen"/>
Gewijzigd op 02/12/2014 17:58:09 door Peter Louwer
Dit topic is gesloten.