Question

首先，我将为您总结演示：我有一个表格供我键入api链接以及要从api链接绘制的图表的类型。之后，我将单击该按钮以创建图表，并将我的输入插入MySQL数据库以在屏幕上显示它。每个图表都有一个按钮供我删除。
一切正常，除了delete funtion可以从数据库中删除我的输入。当我按下删除按钮时，它仅在html中删除，而不在我的数据库中删除。你能帮助我吗？谢谢！
这是我的代码：
我的输入表单：

<!--HTML Form input-->
		<div class = "login-block">
			<form id="form1" style="display: block" method="POST" action="chart_test.php">
			
				<!--Input link api-->
				<b>Link: </b><input type="text" id="link" name="apilink"><br>
				<br>
				
				<!--Chart Type-->
				<b>Chart Type:</b>
				<label class="custom-select">
					<select id="chartType" name="chartType">
						<option value="">Select</option>
						<option value="pie">Pie Chart</option>
						<option value="column">Column Chart</option>
						<option value="bar">Bar Chart</option>
					</select>
				</label>
				<br><br>
				
				<!--Button create chart-->
				<div class ="wrapper">
					<button type="submit" name="create" onClick="drawChart()">Create</button>
					<br><br>
				</div>
				
			</form>
		</div>

将输入插入数据库并显示在屏幕上：

<!--insert form data to mysql-->
    <?php

        $con = mysql_connect("localhost","root","123456");
        if (!$con)
        {
            die('Could not connect: ' . mysqli_error());
        }

        mysql_select_db("activiti_report");

        //check data when first load page to not showing notice error
        if ($_SERVER['REQUEST_METHOD'] == 'POST'){
            $apilink = $_POST["apilink"];
            $chartType = $_POST["chartType"];
        }

        if(isset($_POST['create'])) {
            $sql = "INSERT INTO chartinfo (link, typeChart) VALUES ('$apilink', '$chartType')";

            $result = mysql_query($sql);

            header("Location:chart_test.php");
            exit;
        }           
    ?>

查询数据库以在屏幕上显示图表，并删除带有脚本的按钮：

<?php //query data from database
        $result = mysql_query("SELECT * FROM chartinfo");
    ?>

    <?php //while loop to read data from query result
        while($db_field = mysql_fetch_assoc($result)):          
    ?>

    <?php //unique chartId for not the same to show more chart  
            $idChart = 'chartContainer_' . uniqid();                            
    ?>

    <!--Show chart from database-->
    <br>
    <div class = "chart-block">
        <?php // 2 lines about chart infomation
            echo ("<b>API Link:</b>   "); print $db_field['link'] . "<BR>";
            echo ("<b>Chart Type:</b>   "); print $db_field['typeChart'] . "<BR>";
        ?>

        <!-- The <div> and <script> to show the chart -->
        <div id="<?=$idChart?>" style="height: 360px; width: 70%;"></div>

        <script>
        $(document).ready(function() {

            var dataPointsA = []
            var text = document.getElementById('chartType')
            var strChart = text.options[text.selectedIndex].value

            $.ajax({
                type: 'GET',
                url: "<?php echo $db_field['link']?>", //assign URL from query result field 
                dataType: 'json',
                success: function(field) {
                    for (var i = 0; i < field.length; i++) {
                        dataPointsA.push({
                        label: field[i].name,
                        y: field[i].value
                        });
                    }

            var chart = new CanvasJS.Chart("<?=$idChart?>", {
            title: {
                text: "Activiti Report"
            },

                data: [{
                    type: "<?php echo $db_field['typeChart']?>", //assign type of chart from query result field
                    name: "chart",
                    dataPoints: dataPointsA
                }]
            });

            chart.render();
                }
            });
        });
        </script>
        <br>

        <!--Button to delete the chart and row in database-->
        <button type="submit" name="delete" onClick="removeParent(this.parentNode)">Delete</button>

        <!--Script remove <div> contain the chart-->
        <script>
            function removeParent(parent) {
                parent.remove();
            }
        </script>   

        <!--Script delete form data from mysql-->
        <?php                                                                                           
            if(isset($_POST['delete'])) {
                $sql = "DELETE FROM chartinfo (link, typeChart) WHERE link ='" .$db_field['link']. "' AND typeChart = '" .$db_field['link']. "'";

                $result = mysql_query($sql);

                header("Location:chart_test.php");
                exit;
            }           
        ?>

我知道我应该使用mysqli_ *而不是mysql_ *，但这只是我了解PHP的演示，我仅几天就学会了。抱歉，有很多代码，但我想我应该告诉您了解我在做什么。
非常感谢你！

Answer 1

您的删除按钮从js代码而不是php代码触发其动作。它只会从视图中删除，但会在重新加载时显示。您可以在删除功能中使用ajax或使用删除链接代替按钮

Answer 2

<button type="submit" name="<?php echo chart id here?>" id="btn_del">Delete</button>

$("#btn_del).on("click", function(){
var btn_this = $(this);
var id= $(this).attr('name');
$.ajax({
type: 'GET',
url: "delete.php",
data: {id:id},
success: function(resp) {
    btn_this.parentNode.remove();            
}
});
});


<?php                                                                                           
            if(isset($_GET['id'])) {
                $sql = "DELETE FROM chartinfo WHERE link ='" .$_GET['id']. "';

                $result = mysql_query($sql);
            }           
        ?>

Answer 3

<button type="submit" name="<?php echo chart id here?>" id="btn_del">Delete</button>
<script>
$("#btn_del).on("click", function(){
     var btn_this = $(this);
     var id= $(this).attr('name');
     $.ajax({
           type: 'GET',
           url: "delete.php?id="+id,
           success: function(resp) {
              btn_this.parentNode.remove();            
            }
     });
});

</script>

<?php                                                                                           
    if(isset($_GET['id'])) {
        $sql = "DELETE FROM chartinfo WHERE link ='" .$_GET['id']. "';
        $result = mysql_query($sql);
    }           
 ?>

单击按钮删除MySQL中的任何行

3 个答案: