PHP根据用户选择的项目以模式加载数据

PHP load data in modal depending on the user picked item

本文关键字：模式 加载 数据 项目 用户 选择 PHP      更新时间：2024-01-21

如何加载PHP引导模式对话框中的数据？在这种情况下，产品是动态加载到页面上的。用户可以点击任何项目，根据用户点击的项目，Bootstrap mode应该加载该点击项目的数据。

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存储在下方的id="' . $product->id . '"整行中

echo '<div class="col-md-2"><button type="button" id="' . $product->id . '" class="btn btn-info btn-xs" data-toggle="modal" data-target="#pizzaDetails"><i class="fa fa-wrench"></i> Change</button></div>';

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

我以前做过很多次。。。我做的是：

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函数到url "/ajax/ajax_get_product_info.php?id=" + $(this).id()

如果你阅读了jQuery文档中的例子，你可能会很容易理解，否则，来问吧！

您只需要调用Through 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");
        }
    });
});
相关文章：