Question

如何加载PHP Bootstrap模式对话框中的数据？在这种情况下，产品会在页面上动态加载。用户可以单击任何项目，并且根据用户单击的项目，Bootstrap模式应该加载该被单击项目的数据。

PHP代码：

$products = Product::byCategory($category->id);
while ($product = $products->fetch(PDO::FETCH_OBJ)) {
    echo '<div class="row">';
    echo '<div class="col-md-7"><b>' . $product->name . '</b>'; 
        if($product->is_vegi == YES){echo ' <img src="//dy3erx8o0a6nh.cloudfront.net/images/diet_veg_17px.png" alt="Vegetarian" class="iconVegetarian">';}
    echo "<br />" . $product->description . "</div>";
    echo '<div class="col-md-5">';
    echo '<div class="row">';
    echo '<div class="col-md-offset-3 col-md-4">&pound;' . $product->price . '</div>';
    echo '<div class="col-md-3"><input type="text" maxlength="2" name="qty" id="qty' . $product->id . '" class="form-control custom-control input-sm" value="1" readonly /></div>';
    echo '<div class="col-md-2"><button type="button" id="' . $product->id . '" class="showModalForPizza btn btn-info btn-xs" data-toggle="modal" data-target="#pizzaDetails"><i class="fa fa-wrench"></i> Change</button></div>';
    echo "</div></div></div><br />";
}

ID存储在<{1}}下面的整行

中

id="' . $product->id . '"

目标数据是存储在具有匹配ID的模态中的数据。加载此数据的最佳方法是什么？

Answer 1

我以前做了很多次......我的工作是：

1）在我的项目中有一个名为ajax的文件夹

2）在其中我放置了一个名为ajax_get_product_info.php的文件，该文件将返回HTML响应，其中产品信息结构良好。

//NOTE: CHANGE METHOD NAMES FOR THE EQUIVALENTS ON YOUR FRAMEWORK/CLASS
$productInfo = Product::byId($_GET["id"]); 
?>
<div class="row">
    <div class="col-sm-6">
         <h1><?php echo $productInfo->Title; ?></h1>
         <b>Price: $</b><?php echo $productInfo->Price; ?>
         <hr/>
         <p><?php echo $productInfo->Description; ?></p> 
    </div>
    <div class="col-sm-6">
         <img src="<?php echo $productInfo->ImageURL; ?>" class="dialog-image"/>    
    </div>
</div>

3）使用jQuery（你已经包含了因为你正在使用Bootstrap）并使用其中一个AJAX方法加载模态中返回的内容。

使用函数$("#modalContent").html(theAjaxResponse);

实现此目的

有关jQuery ajax和示例的更多信息，请点击此处： http://api.jquery.com/jquery.ajax/

当您点击按钮时，它应该触发AJAX功能到网址"/ajax/ajax_get_product_info.php?id=" + $(this).id()

如果您阅读jQuery文档中的示例，您可能很容易理解，否则，请来询问！

Answer 2

你只需要通过Javascript调用

这是代码

$('.showModalForPizza').on('click', function() {
    var id = $(this).attr('id');
    $.ajax({
        url: 'PHPFilename',
        type: 'get',
        data: {id: id},
        success: function(data){
            console.log(data);
            $('#pizzaDetails').html(data);
            $('#pizzaDetails').modal('show');
        }
        error: function(){
            console.log("error");
        }
    });
});

PHP以模式加载数据，具体取决于用户选择的项目

2 个答案: