如何使用PHP + Ajax插入数据MySQL

Question

这里有很多类似的问题，但我的问题有点复杂。

我有一个名为movies从我在循环中使用下面的代码显示数据表：

<?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(); 
?> 

此循环显示从movies表四个条目。当用户点击.add-to-watchlist按钮时，电影将被添加到用户的列表中。我有两个单独的表users为用户和watchlist为users和movies之间的交界表。

我的问题是，我该如何实现一个函数，以便我可以将四个列表中的“特定”电影添加到用户列表中？为了获取movieId，我将其转换为隐藏的输入字段，但仍然无法使其工作。

我jQuery代码是：

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

而且watchlist.php是：

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

主要的问题，我看到的是，你的AJAX data字段需要一个对象，否则$_POST值仅包含提交值的密钥。

var data = 'hi'; 

$.ajax({ 
    data: data 
}); 

var_dump($_POST); 

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

您应该更新您的代码以这样的事情，让你期望的结果。

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

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

否则，您可以使用提交整个形式：

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

我也建议删除隐藏表单域元素，只使用一个<button>元素代替，让您的生活更简单。

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

然后你可以更新你的javascript到。

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