将javascript按钮与PHP文件连接

connect a javascript button with a php file

本文关键字：文件连接 PHP javascript 按钮更新时间：2023-09-26

我正在做我的期末项目，在这件事上卡住了我已经尝试了很多来自stackoverflow的建议，但没有结果我制作了一张地图，显示了数据库中的标记由arduino发送…请看imgur上的这张地图照片所以我需要的是能够从数据库中删除这些标记与按钮(删除表的所有行，当按钮被点击或最好隐藏它们，但我不知道如何做到这一点，似乎我需要另一个文件，与数据库交互)，我有链接到delete.php使用jquery，但它不起作用:这里是我的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>

我通过使这些更改来删除方法解决了问题:但仍然坚持如何在执行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;
    }
    }