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

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 存储在 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的modal中存储的数据。加载此数据的最佳方式是什么？

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

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