将var传递给bootstrap modal，其中php将使用此值 [英] pass var to bootstrap modal where php will use this value

问题描述

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

I have an undefined number of images on a page and I have 1 modal. I can open with these images this 1 modal, but I want to be able to know which image was clicked so I can use this information to retrieve more information in a SQL query in the modal.

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

I found the following post: https://stackoverflow.com/a/25060114/7183609 but here the information is passed to an input field, not a PHP value.

这是我的图片代码:

<?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
    }
    ?>

并且我现在使用基本的引导程序模式:

and I use the basic bootstrap modal for now:

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

I doubt that it is possible in 1 modal and I think that I may need multiple modals but I'm not a expert in html/php/javascript

推荐答案

为了使HTML/javascript将信息传递给PHP，您应该使用AJAX.运作方式如下:

In order for HTML/javascript to pass information to PHP, you should use AJAX. Here's how it works:

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

html - browser-side - displays the page elements and values
javascript - browser-side - detects user events (button clicks, dropdown choices) and (once an event happens) can run bits of code to do stuff
PHP - server-side - initially sends the page content (HTML/javascript/CSS code) to the browser, and can store stuff in databases, etc)

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

AJAX - a method of using javascript to communicate with PHP, in order to interact with a database or do other back-end things. Via ajax, js code can send information to a back-end php file, get it to look something up (for example) and send back some data, then the js (still running) can update the page.

但是您不能只是将它们发送给PHP ... ，好像两者之间存在自然联系.为此，您需要编写一个通常涉及ajax的过程-在PHP方面，您必须接收数据并对其进行处理.

But you cannot just send something to PHP... as if there was a natural connection between the two. You need to write a process, usually involving ajax, to do that - and on the PHP side you must receive the data and do something with it.

由于javascript(jQuery)可以检测用户事件(例如，单击图像)，因此您可以使用js获取图片的ID，然后使用AJAX将其发送到后端PHP文件-然后可以执行此操作东西.

Because javascript (jQuery) can detect user events (e.g. clicking on an image), you can use js to get the ID of the picture and then use AJAX to send it to a back-end PHP file - which can then do something.

简单的代码示例:

/*
  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>

这篇关于将var传递给bootstrap modal，其中php将使用此值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！