如何使用 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();
       },
       //...
    });
});