在引导模式下将javascript ID转换为PHP变量

Question

我有用户单击按钮以弹出引导程序模式，并且我将javascript变量传递给所述模式。 我希望该变量是一个PHP变量，因此一旦用户单击按钮，我就可以查询该变量以在模式中显示照片。 现在，我知道PHP是服务器端和javascript客户端，这是我迷路的地方。 我认为它可能需要一些ajax，这不是我的专长。

目前，我正在使用以下javascript：

$(document).on("click", ".open-AddBookDialog", function () {
 var myBookId = $(this).data('id');
 $(".modal-body #bookId").val( myBookId );});

在模式中，使用以下内容，并在文本框中显示正确的ID：

<input type="text" name="bookId" id="bookId" value="">

Answer 1

对于Ajax解决方案，假设

打开模式按钮是；

id="bookid"是您必须传递给Ajax方法以获取图像的图像动态ID。

<a class="btn btn-primary btn-xs" class="open-modal" href="" id="bookid">Open Modal</a>

Ajax应该是

$('.open-modal').click(function(){
    var id = $(this).attr('id');
    $.ajax({
      type : 'post',
       url : 'fetchimage.php', //Here you should put your query 
      data :  'imageid='+ id, //Here you pass your image id via ajax .
      success : function(data){
          // Open modal and show output data from file.php 
          $('#imagebox').show('show');
         $('#imged').html(data);
       }
    });
});

和模式HTML应该是

<div class="modal fade" id="imagebox" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div id="imged"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

在最后的fetchimage.php

<?php
//Database Connection
    if(isset($_POST['imageid'])){  
        $image = $_POST['imageid']; //Escape the string if you like.
        //Run Query to fetch image from database;
        //This will show the image into modal body
        echo '<img src="path-to-image/'. $row["image"] .'" alt="" />';
    }
?>

注意：如果要使用默认行为data-attributes打开模式，则使用modal event listener并替换click function ，如下所示

<a class="btn btn-primary btn-xs" data-id="bookid" data-target="#myModal" data-toggle="modal">Open Modal</a>

show事件监听器

$(document).ready(function(){
    $('#imagebox').on('show.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id'); //image id
       // Can run Ajax Method here
     });
});

Answer 2

您确实确实需要使用Ajax并将id作为参数传递。

$.get('/URL-to-get-posts', {
    bookId: theBookId
}).done(function (data) {
    // code to populate your modal
});

这会将Ajax请求发送到您指定的URL。 您还应该用存储的ID代替图书ID。 您可以将其放在单击中，然后以这种方式填充模式。 我确定打开模型时还会有特定于引导程序的事件-在这种情况下，我不会在模式本身上使用隐藏的输入，但可能会使用数据属性。

该URL可以呈现XML或JSON，您可以使用它们使用JS / jQuery呈现帖子。 您还可以预渲染PHP中的HTML并将其呈现给Ajax调用，以便您的JS代码更简单。

希望这可以帮助。

Answer 3

如果要从PHP获取值，则需要ajax请求。 使用jQuery，您可以轻松地将其存档：

$.ajax({url: "{path_to_php_file}", success: function(response){

        $('#bookId').val(response);
}});

通常，您会收到一个json响应，并可以指定所需的内容，例如：“ response.bookId”。