Formulardaten per AJAX an ein php Script übergeben und in MySQL Datenbank speichern

In diesem Beitrag zeige ich euch, wie einfach es ist mit AJAX ein Formular abzusenden ohne die Seite neu laden zu müssen

HTML Part

<form name="ajaxFormular" id="ajaxFormular" method="POST">
<textarea name="diskNotes" id="nachricht"></textarea>
<input type="submit" value="send">
</form>

AJAX Part

// Wenn das Formular mit der ID ajaxFormular abgesendet wird
$('#ajaxFormular').submit(function(){
  
  // Gib im Content Container eine Lademeldung aus, falls der Vorgang länger dauert
  $('#content').html("Loading Results");

  $.ajax({
    type: 'POST',
    url: 'eintragen.php',
    data: $(this).serialize()
  })
  
  // Wenn Vorgang erfolgreich ...
  .done(function(data){
    // ... lade Daten in den Content Container
    $('#content').html(data);
    // ... leere das Formularfeld mit der ID Nachricht (um z.B. bei einem Messenger den nächsten Beitrag schreiben zu können)
    $('#nachricht').val('');
  })
  // Wenn Vorgang nicht erfolgreich
  .fail(function() {
    // ... logge das Ganze in der Konsole oder führe eine andere Aktion aus
    console.log( "Posting failed." );
  });
  
// verhindert, dass die Seite durch das Formular neu geladen wird (Standardaktion)
return false;

});

PHP / MySQL Part

if(isset($_POST['nachricht']) && strlen($_POST['nachricht']) > 5) {
  
try {

    $conn = new PDO("mysql:host=".$dvCfg['dbhost'].";dbname=".$dvCfg['dbname']."", $dvCfg['dbuser'], $dvCfg['dbpass']);
    $sql = "INSERT INTO messages (nachricht) VALUES (?)";
  $statement = $conn->prepare($sql);
  $statement->execute(array($_POST[nachricht]); 

    } catch(PDOException $e) {
    echo $e->getMessage();
    }

  $conn = null;
  
    $note = new Disk();
    echo $note->getDiskNotes($model,$serial);

} else {
  echo "Seite wurde aufgerufen ohne dass eine Nachricht übergeben wurde";
}