Question

我有一个PHP脚本，可以在我的网站上编辑和删除汽车。现在，我想在一个下拉菜单中创建“编辑”和“删除”按钮，但我确实将其添加的下拉菜单添加到了该行的第一辆车上，因为每个下拉菜单的ID都相同。现在，我知道如何从PHP的每辆汽车中获取唯一ID，但是如何在JavaScript中实现该ID。我将向您展示我的代码。

PHP：

$id = $row["id"];

<div class='dropdown'>

    <button onclick='myFunction()' class='dropbtn'>Settings</button>

    <div id='myDropdown".$id."'class='dropdown-content'>
     ".($featured!=1 ? "<a title='Make ".$title." Featured'href='forms/addfeatured.php?id=".$id."'>Make Featured</a>" : "<a title='Remove ".$title."' href='forms/removefeatured.php?id=".$id."'>Remove Featured</a>")."

    <a title='Delete ".$title."' href='forms/deletecars.php?id=".$id."'>Delete</a>

</div>

JavaScript：

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

那么我如何在javascript中使用不同的ID，以便为每个条目打开下拉菜单？

Answer 1

仅使用，无需从技术上学习AJAX或JSON！

您只需要使用已准备好使用且已放入库中的简单功能。并设置一些所需的参数。

重要的是，您应该知道PHP在服务器计算机上运行，而不是在浏览器或PC上运行。因此，PHP变量也是如此。它们不在您的计算机中，无法轻松地将它们放在JS变量中。
在他的观点上，我们需要与服务器进行通信，以便以适当的格式（使用JSON函数）将它们发送（使用AJAX函数）供我们使用。

所以，您的问题：

如何从PHP脚本向JavaScript代码添加ID？

具有以下功能是最简单的解决方案：

（在您的浏览器页面上）：
$ .ajax（{.. some parameters ..}）;

  $(document).ready(function() {
     $.ajax({ 
       type: 'post',       //Transfer Protocol
       url: 'serving.php', //Address of Server Page
       dataType: 'json',   //Data Structure
       data: {action: 'demo'}, 
       success: function(output) {
              $variables = output;
              }
     });
  });

和
（在服务器上的PHP页面上）
json_encode（..一些数据..）;

$variables = array("Chevy", "BMW", "Ford");
echo json_encode($variables );  // Encoded variable array

很遗憾，我不清楚您的代码和描述是否可以直接在您的项目中提供帮助。

但是我附上一个简单的实际示例：（在Jquery中）

// carSelection.html page
<!DOCTYPE html>
<html lang="en">

<head>
<script 
  src="https://ajax.googleapis.com/ajax/libs
  /jquery/2.1.1/jquery.min.js"> //jquery CDN
</script> 
</head>

<body>
  <div style="margin:2em">
    <form id="myForm">
      <select id="selectNumber">
        <option>Choose a car</option>
      </select>
    </form>
  </div> 

  <script>
    var $cars = '';
    $(document).ready(function() {
      $.ajax({ 
        type: 'post',
        url: 'carServs.php',
        dataType: 'json',
        data: {action: 'demo'},
        success: function(output) {
        $cars = output;

        var option = '';
        for (var i=0;i<$cars.length;i++){
        option += '<option value="'+ $cars[i] + 
        '">' + 
        $cars[i] + '</option>';
         }
        $('#selectNumber').append(option);           
      }
    });
  });
  </script>

</body>
</html>

然后

// carServs.php page
<?php
  // ...
  $cars = array("Chevy", "BMW", "Ford"); 
  echo json_encode($cars);
  //...
?>

请记住将 jquery CDN 附加到您的代码中，在头部或在结束正文标签</body>之前

如果您坚持要在JavaScript中使用它，则只需对语法进行一些更改即可。

如何将ID从PHP脚本添加到JavaScript代码

1 个答案: