AJAX 从数据库中删除项目

Question

我正在尝试使用通过简单的 PHP 循环动态添加的 jQuery/ajax 删除内容，但它不起作用。 我正在使用动态创建的<select>option 来选择项目并通过按button 将其删除。这是我到现在为止的想法：

jQuery:

$(document).on('click', '#rmvBtn', function() {
    // remove the related element
    let del_title = $("#" + $("#selectOpt").val());
        $.ajax({
            type: 'POST',
            cache: false,
            processData: false,
            url: 'delete.php',
            data: {title:del_title},
            success: function(data) {
                if(data) {
                    del_title.remove();
                }
            }
        });
})

PHP 删除：

    define("DB_SERVER", "localhost");
    define("DB_USER", "root");
    define("DB_PASSWORD", "");
    define("DB_NAME", "project");

    $mysqli = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);
    if($mysqli->connect_error) {
        echo "Sorry, there's a problem with the website.\n";
        echo 'Error: ' . $mysqli->connect_error . '\n';
        exit();
    }
    if($_POST['title']) {
        $title = mysqli_real_escape_string($_POST['title']);
        $sql = "DELETE FROM photos WHERE title = $title";
        mysqli_query($sql);
    }

要删除项目的 HTML 表单：

<form class='flex-container' id='remove-form'>
     <p>Select and Remove Item</p>
     <select id='selectOpt' name='title'>
         <option value="" selected disabled hidden>Choose Title</option> /*default value*/
          /*here appear the dynamically created options*/
     </select>
     <button id='rmvBtn'>Delete</button>
</form>

Answer 1

我创建了这个小例子。

$(document).on('click', '#rmvBtn', function() {
  var del_title = $("#selectOpt").val();
  console.log(del_title);
  // Your Ajax Call
  //$.ajax({
  //    type: 'POST',
  //    cache: false,
  //    processData: false,
  //    url: 'delete.php',
  //    data: {title:del_title},
  // You don't need data because you don't have a return 
  //    success: function() {
           $('#selectOpt option[value=' + del_title + ']').remove();
  //    }
  //});

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="cars">Choose a car:</label>

<select name="cars" id="selectOpt">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button id='rmvBtn'>Delete</button>

Answer 2

我已编辑您的代码并添加 echo 以将成功/失败消息发送回 Ajax 作为调试目的。我已将data: {title:del_title} 更改为data: {title:del_title.val()}。我还注意到您的php 代码中的语法错误：if($_POST['title']) { })。 if 语句的末尾不应有)。

jQuery:

$(document).on('click', '#rmvBtn', function() {
    // remove the related element
    let del_title = $("#" + $("#selectOpt").val());
        $.ajax({
            type: 'POST',
            cache: false,
            processData: false,
            url: 'delete.php',
            dataType: "json",
            data: {title:del_title.val()},
            success: function(data) {
                if(data.msg == 'Success') {
                    alert(data.msg);
                    del_title.remove();
                }
                else{
                    alert(data.msg);
                }
            }
        });
})

PHP 删除：

<?php
    define("DB_SERVER", "localhost");
    define("DB_USER", "root");
    define("DB_PASSWORD", "");
    define("DB_NAME", "project");

    $mysqli = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);
    if($mysqli->connect_error) {
        //echo "Sorry, there's a problem with the website.\n";
        //echo 'Error: ' . $mysqli->connect_error . '\n';
        //exit();
        $arr = ('msg' => 'mysqli Connection Error!');
    }
    if($_POST['title']) {
        $title = mysqli_real_escape_string($_POST['title']);
        $sql = "DELETE FROM photos WHERE title = $title";
        mysqli_query($sql);
        //If delete success
        if (mysqli_query($sql)){
            $arr = ('msg' => 'Success');
        }
        else $arr = ('msg' => 'Delete Item Failed');
    }
    echo json_encode($arr);
?>

删除项目的html表单：

<form class='flex-container' id='remove-form'>
     <p>Select and Remove Item</p>
     <select id='selectOpt' name='title'>
         <option value="" selected disabled hidden>Choose Title</option> /*default value*/
          /*here appear the dynamically created options*/
     </select>
     <button id='rmvBtn'>Delete</button>
</form>

我还建议在使用 Ajax 时处理 MySQL 错误，请参阅此answer。