Wie man Daten MySQL mit PHP + Ajax einfügt

Question

Es gibt viele ähnliche Fragen da draußen, aber mein Problem ist ein bisschen komplizierter.

Ich habe eine Tabelle namens movies aus dem ich Daten in einer Schleife angezeigt wird unter Verwendung des Codes:

<?php 
// LISTS MOVIES ORDERED BY RELEASE DATE -- LATEST MOVIES BY YEAR. 
$stmt = $connect->prepare("SELECT id, title, releaseDate, posterUrl FROM movies ORDER BY releaseDate DESC LIMIT 4"); 
$stmt->execute(); 
$stmt->store_result(); 
$stmt->bind_result($movieId, $movieTitle, $movieDate, $moviePoster); 
while ($stmt->fetch()) { ?> 
    <div class="index-movie"> 
     <div class="meta-container"> 
      <img src="<?php echo $moviePoster; ?>" alt="<?php echo $movieTitle; ?>" class="poster"> 
      <div class="meta"> 
       <span class="title"><?php echo $movieTitle . ' (' . substr($movieDate, 0, 4) . ')'; ?></span>      
      </div> 
     </div> 
     <form method="POST" class="watchlist-form"> 
      <input type="text" name="watchlist-movie-id" style="display: none;" class="watchlist-movie-id" value="<?php echo $movieId; ?>"> 
      <input type="submit" class="add-to-watchlist" value="Add to Watchlist" name="add-to-watchlist"> 
     </form> 
    </div> 
<?php 
} 
$stmt->free_result(); 
$stmt->close(); 
?> 

Diese Schleife zeigt vier Einträge aus der movies Tabelle. Wenn der Benutzer auf die Schaltfläche klickt, wird der Film der Benutzerliste hinzugefügt. Ich habe zwei separate Tabellen users für Benutzer und watchlist für die Junction-Tabelle zwischen users und movies.

Meine Frage ist, wie implementiere ich eine Funktion, so dass ich den "spezifischen" Film von der Liste der vier zur Benutzerliste hinzufügen kann? Zum Abrufen des movieId habe ich das in ein verstecktes Eingabefeld zurückgemeldet, aber das kann immer noch nicht funktionieren.

Mein jQuery-Code ist:

$('.add-to-watchlist').on('click', function(e) { 
    e.preventDefault(); 
    var data = $(this).parent().find('.watchlist-movie-id').val(); 
    $.ajax({ 
     type: 'POST', 
     url: 'includes/watchlist.php', 
     dataType: 'text', 
     data: data, 
     success: function() { 
      $(this).hide(); 
     }, 
     error: function(error) { 
      alert(error); 
     } 
    }); 
}); 

Und watchlist.php ist:

<?php 
require('includes/config.php'); 
require('includes/auth.php'); 
$defaultId = 'DEFAULT'; 
$currentDate = 'now()'; 
$movieId = $_POST['watchlist-movie-id']; 
$stmt = $connect->prepare("INSERT INTO watchlist (id, date, userId, movieId) VALUES (?, ?, ?, ?)"); 
$stmt->bind_param("ssii", $defaultId, $currentDate, $currentUser, $movieId); 
$stmt->execute(); 
$stmt->close(); 
?> 

Answer 1

Das Hauptproblem sehe ich darin, dass Ihr AJAX data Feld ein Objekt sein muss, da sonst der $_POST Wert wird nur einen Schlüssel mit dem übergebenen Wert enthalten

var data = 'hi'; 

$.ajax({ 
    data: data 
}); 

var_dump($_POST); 

array(1) { 
    ["hi"]=> 
    string(0) "" 
} 

Sie sollen Ihren Code so etwas wie dies aktualisieren, Ihr erwartetes Ergebnis zu erhalten.

var movieId = $(this).parent().find('.watchlist-movie-id').val(); 

$.ajax({ 
    //... 
    data: { 
     'watchlist-movie-id': movieId, 
    }, 
    //... 
    }); 

Ansonsten können Sie das gesamte Formular mit:

$.ajax({ 
    //... 
    data: $(this).parent().serialize(), 
    //... 
}); 

Ich schlage vor, auch das versteckte Formularfeld-Element zu entfernen und verwenden nur ein <button> Element stattdessen Ihr Leben einfacher zu machen.

<button type="submit" name="watchlist-movie-id" value="<?php echo $movieId; ?>">Add to Watchlist</button> 

Dann können Sie Ihr Javascript auf aktualisieren.

$('button[name="watchlist-movie-id"]').on('click', function(e){ 
    e.preventDefault(); 
    var movieId = $(this).val(); 
    $.ajax({ 
     //... 
     data: { 
      'watchlist-movie-id': movieId, 
     }, 
     success: function() { 
      $(this).hide(); 
     }, 
     //... 
    }); 
});