Question

我正在尝试将数据库中的内容动态加载到名为dynamic的视图中的div中。我在动态div的左侧有一个产品网格，当用户点击其中一个产品时，我希望动态div上填充他们点击的产品的详细信息。此外，我希望页面加载选择并自动显示的第一个产品。我曾尝试过几个关于如何做到这一点的教程，但我所做的只是在圈子里运行。任何帮助表示赞赏。我的代码如下：

Controller（category.php）：

public function product() {
    $product_id = $_POST['product_id'];
    $data['product'] = $this->Category_model->getOneProduct($product_id);
}

模型（Category_model.php）：

public function getOneProduct($id) {
    $result = $this->db->query("SELECT *
    FROM product 
    WHERE product_id = ?", array($id)); 
    return $result->row_array();
}

查看（category_view.php）：

<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $page['page_title']; ?></title>
<meta charset="utf-8">
<meta name="keywords" content="<?php echo $page['page_meta_keywords']; ?>"/>
<meta name="description" content="<?php echo $page['page_meta_description']; ?>"/>
<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/menu.css" type="text/css" media="all">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bgstretcher.css" type="text/css" media="all"; />
<link href='http://fonts.googleapis.com/css?family=Didact+Gothic:regular' rel='stylesheet' type='text/css' />
[removed][removed]
[removed][removed]
[removed][removed]
[removed]
$(document).ready(function(){
 $('body').bgStretcher({
  images: ['<?php echo base_url(); ?>images/background.jpg']
 });
 $('#slideshowHolder').jqFancyTransitions({
  delay: 5000, 
  width: 483, 
  height: 573, 
 });
});
[removed]
</head>
<body>

<div id="main">

    <div>/div>

    <?php $this->load->view('menu_view'); ?>

 <div id="content">

        <div id="left">
         <div id="slideshowHolder">
         <?php foreach ($rotators as $rotator) { ?>
          <img src="<?php echo base_url(); ?>images/<?php echo $rotator['rotator_photo']; ?>" width="100%" alt="">
   <?php } ?>
            </div>
        </div>

        <div id="right">
         <div>
   <table width="50%" cellpadding="5" >
   <tr>
   <?php $sql_endRow = 0;
   $sql_columns = 3;
   $sql_hloopRow1 = 0;
   foreach ($products as $product) {
    if($sql_endRow == 0  && $sql_hloopRow1++ != 0) { ?>
     <tr>
    <?php } ?>
    <td align="center">
                 <a href="">
                  <img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" />
                    </a>
                </td>
    <?php $sql_endRow++;
    if($sql_endRow >= $sql_columns) { ?>
     </tr>
           <?php $sql_endRow = 0;
    }
   }
   if($sql_endRow != 0) {
    while ($sql_endRow < $sql_columns) { ?>
     <td>&nbsp;</td>
     <?php $sql_endRow++;
    } ?>
    </tr>
   <?php }?>
   </table>
   </div>

            <div id="dynamic">
             <?php //print_r($one_product); ?>
   </div>
        </div>

  <div>/div>

    </div>

</div>

</body>
</html>
</code>

Answer 1

在product（）中，让product_id来自GET而不是POST，这样你的链接就可以在没有javascript的情况下运行。

$product_id = $_GET['product_id'];

在getOneProduct（$ id）中：

return json_encode($result->row_array());

HTML：

<table width="50%" cellpadding="5" id="product-grid">
<!-- snip -->
<a href="/your/url/product?product_id=<?php echo $product['product_id']; ?>" data-product-id="<?php echo $product['product_id']; ?>">
    <img src="<?php echo base_url(); ?>products/<?php echo $product['product_thumbnail']; ?>" />
</a>

示例javascript（jquery）：

$('#product-grid a').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "/your/url/product",
        data: "product_id=" + $(this).attr('data-product-id'),
        success: function(msg){
            var product_data = jQuery.parseJSON(msg);

            // do something with product_data
            $('#dynamic').html('New product: ' + product_data.product_id);
        }
    });
});

jQuery使用CodeIgniter将内容加载到Div中

1 个答案: