Php 如何通过传单标记删除MySQL数据库中的行？_Php_Mysql_Leaflet

Php 如何通过传单标记删除MySQL数据库中的行？

php mysql leaflet

Php 如何通过传单标记删除MySQL数据库中的行？,php,mysql,leaflet,Php,Mysql,Leaflet,我试图深入了解传单+MySQL连接，但我开始失去概述。我有一个数据库geomemarkers，其中包含多个标记，它们存储了不同的属性。我想为用户应用一项功能，通过单击标记弹出框中的“删除”来删除不感兴趣的标记。但现在情况变得越来越复杂了。如何获取所选标记的单个id（从数据库中）（在弹出窗口中单击delete），以及如何将其传递给PHP命令，以便在数据库中删除该点？我使用了$\u Post方法来上传数据，但在这种情况下，thinks不起作用 <!DOCTYPE html> <ht

我试图深入了解传单+MySQL连接，但我开始失去概述。我有一个数据库

geomemarkers

，其中包含多个标记，它们存储了不同的属性。我想为用户应用一项功能，通过单击标记弹出框中的“删除”来删除不感兴趣的标记。但现在情况变得越来越复杂了。如何获取所选标记的单个id（从数据库中）（在弹出窗口中单击delete），以及如何将其传递给PHP命令，以便在数据库中删除该点？我使用了

$\u Post

方法来上传数据，但在这种情况下，thinks不起作用

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"/>
    <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css"/>
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Norican">
</head>



<body>

    <div id="map" >
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <!--<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>-->
        <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
        <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>

        <script>

            $(document).ready(function() {
            getUsers();
            });


            var map = L.map('map').setView([47.000,-120.554],13);
            mapLink =
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            L.tileLayer(
            'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
            maxZoom: 18,
            }).addTo(map);
    
            var greenIcon = L.icon({
            iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
            iconSize:     [30, 38], // size of the icon
            });
    
            
            function getUsers() {
                $.getJSON("getData.php", function (data) {
                for (var i = 0; i < data.length; i++) {
                var location    = new L.LatLng(data[i].lat, data[i].lng);
                var id          = data[i].id;
                var species     = data[i].species;
                var diameter    = data[i].average_diameter;
                var quality     = data[i].quality;
                var damage      = data[i].damage;
                var notes       = data[i].additional_information;

                var marker      = L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);
                                    marker.bindPopup(id + "<br>" + species + "<br>" + diameter + "<br>" + quality + "<br>" + damage + "<br>" + notes + "<br>" + "<br>" +
                                    '<input type="submit" id = "delete" name="action" data-value = " + id + " value="Delete" method = "post"/>');
                                    
                            
                                    
                        }
                    })
                }       
                
        </script>
   </div>


    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script type="text/javascript">
    $(function(){
        $('#delete').click(function(d){
            
        var id = document.getElementById("delete").getAttribute("data-value");

            $.ajax({
                type: 'POST',
                url: 'delete.php',
                data: {id:id}
                success: function(data) {
                    alert(data);
                }
                error: function(data){
                        alert('Something went wrong while deleting.');}
        });
    });
});
</script>




    
</script>
    
</body>
</html>


$（文档）.ready（函数（）{
getUsers（）；
});
var map=L.map（'map'）.setView（[47.000，-120.554]，13）；
地图链接=
'';
蒂莱耶(
'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'{
属性：“映射数据：©；贡献者，|映射样式：©；（）”，
maxZoom:18，
}).addTo（地图）；
var greenIcon=L.icon({
伊克努尔：'http://leafletjs.com/examples/custom-icons/leaf-green.png',
图标大小：[30,38]，//图标的大小
});
函数getUsers（）{
$.getJSON（“getData.php”，函数（数据）{
对于（变量i=0；i”+物种+”
“+直径+”
“+质量+”
“+损坏+”
“+注释+”
“+”
”+
'');
}
})
}       
$（函数（）{
$（“#删除”）。单击（函数（d）{
var id=document.getElementById（“删除”）.getAttribute（“数据值”）；
$.ajax({
键入：“POST”，
url:'delete.php'，
数据：{id:id}
成功：功能（数据）{
警报（数据）；
}
错误：函数（数据）{
警报（'删除时出错。'）；}
});
});
});

getData.php

<?php   
    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "SELECT * FROM geomarker";  
    $result = mysqli_query($connect, $sql);  
    $json_array = array();  
        while($data = mysqli_fetch_assoc($result))  
            {  
        $json_array[] = $data;  
            }  

       echo json_encode($json_array);  
?>

delete.php

<?php   

if(isset($_POST)){

    $id                 = $_POST['id'];

    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "DELETE FROM geomarker WHERE id = ($id)";  
    $result = mysqli_query($connect, $sql);  
    if($result){
            echo 'Data successfully deleted.';
        }else{
            echo 'There were erros while deleting the data.';
        }
    
}
?>

如果您的

'<a href="#"  id = "delete" data-value = id >delete</a>'

如果你的

'<a href="#"  id = "delete" data-value = id >delete</a>'

@DRS依偎在弹出窗口中，您可以通过这种方式进入删除功能

marker.on('popupopen', function(e) {
  // your delete function
});

更新示例

let config={
minZoom:7，
maxZomm:18，
};
常数缩放=16；
常数lat=52.2297700；
常数lon=21.0117800；
设点=[
[52.230020586193795，21.01083755493164，‘第1点’，
[52.22924516170657，21.011320352554325，‘第2点’]，
[52.2295113046884421.01270973682404，‘第三点’]，
[52.23040500771883、21.012146472930908，‘第4点’]
];
const map=L.map（'map'，config.）.setView（[lat，lon]，zoom）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//向地图添加多个标记的循环
for（设i=0；i{
btn.addEventListener（'单击'，（）=>{
警报（btn.getAttribute（'data-value'）；
})
})
});
}

*{
保证金：0；
填充：0
}
html{
身高：100%
}
身体，
html，
#地图{
身高：100%；
保证金：0；
填充：0
}

@dr通过这种方式，您可以进入弹出窗口中的删除功能

marker.on('popupopen', function(e) {
  // your delete function
});

更新示例

let config={
minZoom:7，
maxZomm:18，
};
常数缩放=16；
常数lat=52.2297700；
常数lon=21.0117800；
设点=[
[52.230020586193795，21.01083755493164，‘第1点’，
[52.22924516170657，21.011320352554325，‘第2点’]，
[52.2295113046884421.01270973682404，‘第三点’]，
[52.23040500771883、21.012146472930908，‘第4点’]
];
const map=L.map（'map'，config.）.setView（[lat，lon]，zoom）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（地图）；
//向地图添加多个标记的循环
for（设i=0；i{
btn.addEventListener（'单击'，（）=>{
警报（btn.getAttribute（'data-value'）；
})
})
});
}

*{
保证金：0；
填充：0
}
html{
身高：100%
}
身体，
html，
#地图{
身高：100%；
保证金：0；
填充：0
}

最终代码：

最后，我设法将所有内容拼凑在一起，

getUsers（）

进行一些调整：

function getUsers() {
                $.getJSON("getData.php", function (data) {
                for (var i = 0; i < data.length; i++) {
                var location    = new L.LatLng(data[i].lat, data[i].lng);
                var id          = data[i].id;
                var species     = data[i].species;
                var diameter    = data[i].average_diameter;
                var quality     = data[i].quality;
                var damage      = data[i].damage;
                var notes       = data[i].additional_information;

                var popupText   = `<button data-value= "${data[i].id}" class="delete">Delete</button>`;
                
                var marker      = new L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);
                                    marker.bindPopup("ID:"+ id + "<br>" + "Species: " + species + "<br>" + "Diameter: " + diameter +"cm" + "<br>" +"Quality: " + quality + "<br>" +"Damage: " + damage + "<br>" +"Notes: " + notes + "<br>" + "<br>" + popupText);
                                    
                            
                                marker.on('popupopen',function(e){
                                    
                                        const btns = document.querySelectorAll('.delete');
                                            btns.forEach(btn => {
                                            btn.addEventListener('click', () => {
                                            
                                            var id = btn.getAttribute('data-value');
                                            
                                                $.ajax({
                                                    type: 'POST',
                                                    url: 'delete.php',
                                                    data: {id1:id},
                                                    success: function(data){
                                                        alert(data);},
                                                    error: function(data){
                                                        alert('Something went wrong.');}
                        
                        
                                                });
                                            
                                            })
                                            });

                                        
                                    
                                    
                                });                 
                }
                

                })
            }

<?php   

    $id= $_POST['id1'];

    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "DELETE FROM geomarker WHERE id = ($id)";  
    $result = mysqli_query($connect, $sql);  
    if($result){
            echo 'Data successfully deleted.';
        }else{
            echo 'There were erros while deleting the data.';
        }
    
?>

谢谢你的帮助

最终代码：

最后，我设法将所有内容拼凑在一起，

getUsers（）

进行一些调整：

function getUsers() {
                $.getJSON("getData.php", function (data) {
                for (var i = 0; i < data.length; i++) {
                var location    = new L.LatLng(data[i].lat, data[i].lng);
                var id          = data[i].id;
                var species     = data[i].species;
                var diameter    = data[i].average_diameter;
                var quality     = data[i].quality;
                var damage      = data[i].damage;
                var notes       = data[i].additional_information;

                var popupText   = `<button data-value= "${data[i].id}" class="delete">Delete</button>`;
                
                var marker      = new L.marker([data[i].lat, data[i].lng], {icon: greenIcon}).addTo(map);
                                    marker.bindPopup("ID:"+ id + "<br>" + "Species: " + species + "<br>" + "Diameter: " + diameter +"cm" + "<br>" +"Quality: " + quality + "<br>" +"Damage: " + damage + "<br>" +"Notes: " + notes + "<br>" + "<br>" + popupText);
                                    
                            
                                marker.on('popupopen',function(e){
                                    
                                        const btns = document.querySelectorAll('.delete');
                                            btns.forEach(btn => {
                                            btn.addEventListener('click', () => {
                                            
                                            var id = btn.getAttribute('data-value');
                                            
                                                $.ajax({
                                                    type: 'POST',
                                                    url: 'delete.php',
                                                    data: {id1:id},
                                                    success: function(data){
                                                        alert(data);},
                                                    error: function(data){
                                                        alert('Something went wrong.');}
                        
                        
                                                });
                                            
                                            })
                                            });

                                        
                                    
                                    
                                });                 
                }
                

                })
            }

<?php   

    $id= $_POST['id1'];

    $connect = mysqli_connect("localhost", "root", "", "useraccounts");  
    $sql = "DELETE FROM geomarker WHERE id = ($id)";  
    $result = mysqli_query($connect, $sql);  
    if($result){
            echo 'Data successfully deleted.';
        }else{
            echo 'There were erros while deleting the data.';
        }
    
?>

Thx用于