將外部php文件加載到div的Ajax調用將返回所有html DOM

Question

我正在嘗試將內容從外部php文件加載到div中，但它正在加載所有DOM。 換句話說，它正在div中創建活動頁面的克隆或副本，而我正在嘗試加載文件。

我試過讓外部文件中的所有html標記回顯，但結果相同。

我有這個：
[index.php]

  <div class="grid-body no-border"> <br />
    <div class="row-fluid model_box" >

      <div class="span2">
      </div>
      <div class="span2 model_item">
        <img class="btn_image" src="<?php echo BASE_URL; ?>images/grid1.jpg" model="1"/>
      </div>
      <div class="span2 model_item">
        <img class="btn_image" src="<?php echo BASE_URL; ?>images/grid2.jpg"  model="2"/>
      </div>
      <div class="span2 model_item">
        <img class="btn_image" src="<?php echo BASE_URL; ?>images/grid3.jpg"  model="3"/>
      </div>
      <div class="span2 model_item">
        <img class="btn_image" src="<?php echo BASE_URL; ?>images/grid4.jpg"  model="4"/>
      </div>
      <div class="span2 model_item">
        <img class="btn_image" src="<?php echo BASE_URL; ?>images/grid5.jpg"  model="5"/>
      </div>

    </div>
  </div>


<div id="active_model"></div>

[script.js]

$('.btn_image').click(function(){
  console.log($(this).attr('model'));
  model = $(this).attr('model');
  save_data_parent.model = model;

  $.ajax({
    url: 'models/model_'+model+'.php',
    type: 'post',
    dataType: "html",
    data: {},
    success: function (data, status) {
      //console.log("Success!!");
      console.log(data);
      //console.log(status);
      $('#active_model').html(data).fadeIn(500);
    }
  });
});

[models / model_1.php]

<div>
<?php echo 'This is a test'; ?>
</div>

Answer 1

您可以使用echo返回html標簽的字符串，例如...

echo "Your tags ";

嘗試它希望有用...

Answer 2

謝謝@ Pinoniq，ajax請求中的路徑缺少整個url才能正常工作。

$('.btn_image').click(function(){
  console.log($(this).attr('model'));
  model = $(this).attr('model');
  save_data_parent.model = model;

  BASE_URL = 'http://localhost:8888/site/'; // <------------------

  $.ajax({
    url: BASE_URL+'models/model_'+model+'.php', // <------------------
    type: 'post',
    dataType: "html",
    data: {},
    success: function (data, status) {
      //console.log("Success!!");
      console.log(data);
      //console.log(status);
      $('#active_model').html(data).fadeIn(500);
    }
  });
});