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

我试图深入了解传单+MySQL连接，但我开始失去概述。我有一个带有多个标记的数据库geomarkers，这些标记存储了不同的属性。我想为用户应用一种功能，通过点击"删除"来删除不感兴趣的标记；删除"；在标记的弹出框中。但这里变得越来越复杂。我如何(从数据库(获得所选标记的个人id(单击弹出窗口中的删除(，以及如何将其传递给PHP命令，以便在数据库中删除这一点？我使用了$_Post方法来上传数据，但在这种情况下认为不起作用。

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

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

在某种程度上，最终在某个地方调用函数delete()并将data-value属性传递给它，您可能需要做的就是编写它，以便使用正在定义的ID的实际值：

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

@DrSnuggles通过这种方式，您可以在弹出的中获得删除功能

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

更新示例

let config = {
minZoom: 7,
maxZomm: 18,
};
const zoom = 16;
const lat = 52.2297700;
const lon = 21.0117800;
let points = [
[52.230020586193795, 21.01083755493164, 'point 1'],
[52.22924516170657, 21.011320352554325, 'point 2'],
[52.229511304688444, 21.01270973682404, 'point 3'],
[52.23040500771883, 21.012146472930908, 'point 4']
];
const map = L.map('map', config).setView([lat, lon], zoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// loop that adds many markers to the map
for (let i = 0; i < points.length; i++) {
const lat = points[i][0];
const lng = points[i][1];
const popupText = `<button data-value="test-${i+1}" class="delete">${points[i][2]}</button>`;
marker = new L.marker([lat, lng])
.bindPopup(popupText)
.addTo(map);
marker.on('popupopen', function(e) {
const btns = document.querySelectorAll('.delete');
btns.forEach(btn => {
btn.addEventListener('click', () => {
alert(btn.getAttribute('data-value'));
})
})
});
}

* {
margin: 0;
padding: 0
}
html {
height: 100%
}
body,
html,
#map {
height: 100%;
margin: 0;
padding: 0
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<div id="map"></div>

最终代码：

最后我设法把所有的东西都拼在一起，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.');}


});

})
});



});                 
}

})
}

并且CCD_ 6得到了一些调整：

<?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.';
}

?>

谢谢你的帮助！

相关内容

最新更新

热门标签：