POST request zonder refresh

Tuurlijk kan dat, ik raad om dan de $.post() functie te gebruiken in jQuery. En bij voorkeur een script zonder een formulier, als je een melding wilt tonen of het gelukt is.

Dankje voor je reactie, ik ben er bijna maar ik denk dat ik iets fout doe.

index.php

<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>

action.php

<?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...';
}
?>

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 ?

Ik gebruik deze structuur. Daarin kan je makkelijker kijken wat er fout gaat met het de parameters in het error-event:

$.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);
		}    
});

Snap niet zo goed hoe ik deze snippet kan gebruiken, maar toch bedankt ;)

Binnen in je

$('#userData').submit(function(){
	/* Hier de snippet*/
});

Veel geprobeerd maar kom er niet uit.
Als iemand een directe oplossing heeft zou echt super zijn.
Mijn action.php kan niet zien op welke knop er is gedrukt :
<?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...';
}
?>

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?

<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>

Ik stuur een array terug in m'n 'post reactie', bijv. json_encode(array('myResult'=>'succesfull'));

Probeer eens:

 $('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');
});

In m'n array heb ikzelf ook nog een message zitten, waarin ik een bericht terugstuur, bijv. een sql error ofzo :)

Redcoffe redcoffe op 02/12/2014 10:27:42

In m'n array heb ikzelf ook nog een message zitten

Leg eens uit?

De manier die ik zelf gebruik:

<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>

en dan kan je gewoon isset($_POST['naam'] en alles gebruiken, let op pas eventueel URL aan

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.