Jquery使用php ajax重新加载选择更改的div内容

时间:2014-06-11 07:51:35

标签: php jquery ajax

好的,这是我的代码

portfolio.php

            <select name="portfolio" id="portfolio_dropdown" class="service-dropdown">
                <?php foreach($years as $year){ ?>
                   <option value="<?php echo $year['year']; ?>"><?php echo $year['year']; ?></option>
                <?php } ?>
            </select>
        <div class="loading"></div>
        <div id="portfolio">
            <div id="port-cont">
               <?php foreach($portfolios as $portfolio){ ?>
               <div class="video">
                <div class="play">
                    <a href="http://www.youtube.com/v/<?php echo $portfolio['url']; ?>">Play</a>
                </div>
              <iframe src="http://www.youtube.com/v/<?php echo $portfolio['url']; ?>"frameborder="0" allowfullscreen></iframe>
                    <h3><?php echo $portfolio['title']; ?></h3>
                    <p><?php echo $portfolio['text']; ?></p>
               </div>
               <?php } ?>
        </div>
        </div>

我的js代码

$("body").on('change','#portfolio_dropdown',function(){
     var year = $(this).val();

     $.ajax({
       type: "POST",
       url: "catalog/controller/portfolio.php",
       data: "year="+year,
       beforeSend: function(){
         $(".loading").show();
         $("#portfolio").empty();
       },
       success: function(portfolio_data){
         $(".loading").hide();
          $("#portfolio").html(portfolio_data);
       }
     });
});

我的投资组合控制器文件

if(isset($_POST['year'])){
  include_once "../../system/validation.php";
  include_once "../model/DataBase.php";
  include_once "../model/Display.php";

  $year = integer($_POST['year']);

  $get_portfolio_data = new Display("portfolio");

  $portfolios = $get_portfolio_data->getDataByColumnName("year",$year);

 include_once "../view/themes/default/template/portfolio_data.php";

  exit();
}

我的投资组合文件“第一个”我用另一个函数得到我的数据,我得到了去年(2014年)的投资组合数据

所以当我改变年份时,我会调用我的控制器文件来获取与该年相关的数据

我的问题是如何返回我从控制器文件中获得的$ portfolio,因此我不必更改模板文件代码或包含其他文件,如我所做的那样

我的意思是我需要重新加载我的portfolio.php模板内容

我试过这样的事情

$("body").on('change','#portfolio_dropdown',function(){
     var year = $(this).val();

     $.ajax({
       type: "POST",
       url: "catalog/controller/portfolio.php",
       data: "year="+year,
       beforeSend: function(){
         $(".loading").show();
         $("#portfolio").hide();
       },
       success: function(portfolio_data){
         $(".loading").hide();
          $("#portfolio").show().load("portfolio" + " #port-cont");
       }
     });
});

但我不知道如何将新的$ portfolio数据发送到同一个div而不包含另一个模板文件

实际上我对如何正确地做到这一点感到困惑

所以我希望你得到我想做的事情:)

2 个答案:

答案 0 :(得分:0)

您可以创建一个单独的portfolio-div.php文件,该文件仅包含您要替换的代码,并从$.ajax调用中调用该代码。

或者您可以向$_GET添加?skiptemplate=1 portfolio.php参数,以便在使用该参数调用文件时,从文件调用文件时会跳过周围的模板标记。 ajax电话。

如果您没有机会更改服务器端代码,则可以再次加载整个模板文件,但只提取#port-cont部分以替换现有内容。不要使用load()(它本身会调用网址),而是使用html()

$("#portfolio").show().html(portfolio_data);

(虽然这会插入所有HTML,而不仅仅是#port-cont部分)

答案 1 :(得分:0)

$("#portfolio").html(portfolio_data)

只需将参数传递给html

即可