javascript - 将 var 传递给 bootstrap 模式，其中 php 将使用该值

Question

我在页面上有未定义数量的图像，并且有 1 个模态。我可以使用这些图像打开这个 1 模态，但我希望能够知道单击了哪个图像，以便我可以使用此信息在模态中的 SQL 查询中检索更多信息。

我找到了以下帖子:https://stackoverflow.com/a/25060114/7183609但这里的信息被传递到输入字段，而不是 PHP 值。

这是我的图像代码:

<?php
    for ($i=0; $i < count($products); $i++) {
    ?>
    <article class="<?php echo $products[$i]['style'];?>">
        <span class="image">
            <img src="<?php echo $images[$i]['location'];?>" alt="" data-toggle="modal" data-target="#exampleModal" />
        </span>
        <a style="pointer-events: none; cursor: default;" href="">
            <h2><?php echo $products[$i]['title']; ?></h2>
            <div class="content">
                <p>
                    1000gr €<?php echo $products[$i]['prijs1000gr'];?>
                    <br />
                    500gr €<?php echo $products[$i]['prijs500gr'];?>
                </p>
            </div>
        </a>
    </article>
    <?php
    }
    ?>

我现在使用基本的引导模式:

<!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

我怀疑这是否可以在 1 种模式中实现，并且我认为我可能需要多种模式，但我不是 html/php/javascript 方面的专家

Answer 1

为了让 HTML/javascript 向 PHP 传递信息，您应该使用 AJAX。其工作原理如下:

html - 浏览器端 - 显示页面元素和值
javascript - 浏览器端 - 检测用户事件(按钮点击、下拉选项)并且(一旦事件发生)可以运行一些代码来执行操作
PHP - 服务器端 - 最初将页面内容(HTML/javascript/CSS 代码)发送到浏览器，并可以将内容存储在数据库等中)

AJAX - 一种使用 JavaScript 与 PHP 通信的方法，以便与数据库交互或执行其他后端操作。 通过ajax，js代码可以将信息发送到后端php文件，让它查找某些内容(例如)并发送回一些数据，然后js(仍在运行)可以更新页面。

但是您不能只是向 PHP 发送一些内容...，就好像两者之间存在天然联系一样。您需要编写一个流程(通常涉及 ajax)来执行此操作 - 并且在 PHP 端，您必须接收数据并对其执行某些操作。

因为javascript(jQuery)可以检测用户事件(例如点击图片)，所以可以使用js获取图片的ID，然后使用AJAX将其发送到后端PHP文件 - 然后可以执行以下操作东西。

简单代码示例:

/*
  Example just demonstrates what jQuery looks like, and how js detects events
*/
$('img').click(function(){
  tmp = this.id;
  $('#msg').html(tmp).removeClass('hid').addClass('wow');
  /* THIS part sends the ID to the back-end PHP file */
  $.ajax({
    type:'post',
     url:'name_of_your_php_file.php',
     data: 'id:' +tmp
  });
  setTimeout(function(){
    $('#msg').html('The ID was transmitted to a non-existent back-end php file');
  },500);
});

$('#msg').click(function(){
  $(this).removeClass('wow').addClass('hid');
});

*{}
#msg{position:fixed;top:0;width:40vw;height:30vh;background:#00f;opacity:0.5;}

.hid{display:none;}
.wow{padding:30vh 30vw;color:yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<img id="img_41" src="https://placeimg.com/140/80/any" />

<div id="msg" class="hid"></div>