Question

我正在完成我的最后一年项目并且坚持这件事我从stackoverflow尝试了很多建议，但没有结果我制作了一个显示数据库中标记的地图由arduino发送... see this photo of the map at imgur 所以我需要的是能够用一个按钮从数据库中删除这些标记（当点击按钮时删除表的所有行或者优先隐藏它们但我不知道怎么做它似乎我需要另一个与数据库交互的文件）并且我使用jquery将其链接到delete.php但是它不起作用：这是我的页面的html代码请先阅读评论，注意我所做的改变并为delete.php脚本：并提前谢谢

<?php
$host = "localhost"; //MySQL Host. If you have trouble connecting try "localhost"
$user = "...."; //MySQL username
$password = "...."; //Password for MySQL username Edpzrztkskdwrsardgymzdazfrzwo6
$db_name = "...."; //Name of the db
$table = "statut"; //Name of the table in db

// Create connection
$conn = mysqli_connect($host, $user, $password, $db_name);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

// sql to delete a record
$sql = "DELETE FROM statut";

if (mysqli_query($conn, $sql)) {
    echo "Record deleted successfully";
} else {
    echo "Error deleting record: " . mysqli_error($conn);
}

mysqli_close($conn);
?>

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>carte de porte source tanger</title>
      <style>
      html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 8px;
        left: 50%;
        margin-left: -190px;
        z-index: 5;
        background-color:#058aff;
        padding: 2px;
        border: 1px solid #058aff;
        border-radius: 3px;
        font-family:Arial;
        font-size:17px;
      }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>// i have add this to be able to use jquery
    <script type="text/javascript">


    //  this is  needed for showing the map 

    var customIcons = {
      
        icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'};

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(35.7672700 ,-5.7997500),
        zoom: 13,
       mapTypeId: google.maps.MapTypeId.SATELLITE
        });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("xml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var nom_poste = markers[i].getAttribute("nom_poste");
          var ts = markers[i].getAttribute("ts");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html ="<b> Date/heure : </b>"+ ts +"<b> GMT </b>"+ "</br>"+"<b> nom de poste : </b> "+nom_poste ;
          var icon = customIcons || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
          bindInfoWindow(marker, map, infoWindow, html);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
    function deleteMarkers() { //deleteMarkers declaration 
    $.get("delete.php");// calling the delete.php script
    return false;
}

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}

    //]]>

  </script>

  </head>

  <body onload="load()">
      <div id="panel">
<a href="#" onclick="deleteMarkers();">Click Me!</a>    // call the method deletemarkers when the button is clicked 
    
    </div>
    <div id="map" style="width: 1366px; height: 666px"></div>

    
  </body>

</html>

Answer 1

我已经通过对删除方法进行这些更改来解决问题：但仍然坚持如何在执行php脚本时保持在同一页面我认为我应该使用AJAX但我不知道如何

  <a href="delete.php" onclick="return deleteMarkers();" />Delete</a>

 function deleteMarkers(){ 
    var question = confirm("Are you sure?");
    if(question){

    return true;

    }else{

    alert("Thanks for not choosing to delete");
    return false;

    }

    }

用JavaScript文件连接一个javascript按钮

1 个答案: