ajaxを使って値を送信した後にファイル全体を読み込む方法

Question

クリックするといくつかのブロックが得られ、クリックするとファイル名が投稿されます。私のPHPファイルのクエリはそれに応じて変更されます。私の唯一の質問は、私は私のPHPファイルに値を投稿する方法を知っているが、私は私のホームページのdiv内の全体の結果を返すのですか？

マイブロック：

<div class="col-md-4 col-sm-6 vk-clear-padding handmouse haven"> 
    <div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;"> 
     <div class="iconbox-content vk-section-style-5"> 
      <h2 class="vk-heading text-uppercase" aria-label="01"> 
       <span>Haven & Industrie</span> 
      </h2> 
     </div> 
    </div> 
</div> 
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse openbaar"> 
    <div class="vk-iconbox vk-iconbox-background vk-iconbox-striped text-center" style="background-color: #faf5f5;"> 
     <div class="iconbox-content vk-section-style-5"> 
      <h2 class="vk-heading text-uppercase" aria-label="02"> 
       <span>Openbare Ruimte</span> 
      </h2> 
     </div> 
    </div> 
</div> 
<div class="col-md-4 col-sm-6 vk-clear-padding handmouse landmeten"> 
    <div class="vk-iconbox vk-iconbox-background text-center" style="background-color: #ececec;"> 
     <div class="iconbox-content vk-section-style-5"> 
      <h2 class="vk-heading text-uppercase" aria-label="03"> 
       <span>Landmeten</span> 
      </h2> 
     </div> 
    </div> 
</div> 

私のjavascript：

$('.handmouse').click(function(e){ 
    var data = $(this).attr("data-attribute"); 
    $.post("ajax/blokken.php", { 
     dienstnaam : data 
    }); 
    $('.tabwrapper').slideToggle(); 
    $('html, body').animate({ 
     scrollTop: $(".tabwrapper").offset().top 
    }, 2000); 
}); 

私のPHPファイル：

<? 
session_start(); 

class Connection { 
    // Configure Database Vars 
    private $host  = 'removed'; 
    private $username = 'removed'; 
    private $password = 'removed'; 
    private $db_name = 'removed'; 
    public $db; 

    function __construct() { 
     // Create connection 
     $db = new mysqli($this->host, $this->username, $this->password, $this->db_name); 

     // Check connection 
     if ($db->connect_errno > 0) { 
      die('Unable to connect to the database: '.$db->connect_error); 
     } 

     $this->db = $db; 
    } 

    public function query($query) { 
     $db = $this->db; 
     $this->db->query('SET NAMES utf8'); 
     if (!$result = $this->db->query($query)) { 
      die('There was an error running the query ['.$db->error.']'); 
     } else { 
      return $result; 
     } 
    } 

    public function multi_query($query) { 
     $db = $this->db; 
     if (!$result = $this->db->multi_query($query)) { 
      die('There was an error running the multi query ['.$db->error.']'); 
     } else { 
      return $result; 
     } 

    } 

    public function real_escape_string($value) { 
     return $this->db->real_escape_string($value); 
    } 

    public function inserted_id() { 
     return $this->db->insert_id; 
    } 
} 

$conn = new Connection; 

?> 

<div class="vk-what-we-do-section vk-section vk-section-style-2 vk-section-style-3 tabwrapper"> 
    <div class="container"> 
     <h2 class="vk-heading vk-heading-border vk-heading-border-left"> 
      <? 
      // Haal de categorienaam op 
      $level1    = "SELECT * FROM `snm_categories` WHERE alias = '".$_POST['dienstnaam']."'"; 
      $levelcon1    = $conn->query($level1); 
      $levelcr1    = array(); 
      while ($levelcr1[] = $levelcon1->fetch_array()); 

      // Haal alle artikelen op bij de bovenstaande categorie 
      $level2    = "SELECT * FROM `snm_content` WHERE catid = '".$conn->real_escape_string($levelcr1[0]['id'])."'"; 
      $levelcon2    = $conn->query($level2); 
      $levelcr2    = array(); 
      while ($levelcr2[] = $levelcon2->fetch_array()); 
      ?> 
     <span> 
     <span class="vk-text-color-yellow-1">Onze</span> expertise 
     </span> 
     </h2> 
     <nav class="box-filter text-center clearfix"> 
      <ul class="vk-filter vk-filter-button-fix hidden-xs hidden-sm"> 
       <? 
       foreach($levelcr2 as $topnamen){ 
        if($topnamen['id'] != ''){ 
        $namenoverzicht .= '<li class="data-filter" data-filter=".'.$topnamen['alias'].'">'.$topnamen['title'].'</li>'; 
        } 
       } 
       echo $namenoverzicht; 
       ?> 
      </ul> 

      <select class="vk-filter vk-filter-button-fix form-control hidden-md hidden-lg" id="dropdown-filter"> 
       <? 
       foreach($levelcr2 as $options){ 
       $optionlist .= '<option class="data-filter" value=".'.$options['alias'].'">'.$options['title'].'</option>'; 
       } 
       echo $optionlist; 
       ?> 
      </select> 
     </nav> 

     <div class="row vk-filter-fix"> 
      <? 
      $o = 1; 
      foreach($levelcr2 as $tabdata){ 
      if($o == 1){ 
       $first = 'first'; 
      }else{ 
       $first = '0'; 
      } 
      $tabitem .= ' 
      <div class="item '.$first.' '.$tabdata['alias'].'"> 
       <div class="col-md-6 left"> 

        <div class="vk-img-frame"> 
         <img src="images/services/image-7.jpg" alt=""/> 
        </div> 
       </div> 

       <div class="col-md-6 right"> 
        <div class="content"> 
         <h4 class="text-uppercase vk-title">'.$tabdata['title'].'</h4> 
         '.$tabdata['introtext'].' 
        </div> 
        <div class="vk-buttons"> 
         <div class="vk-counter vk-counter-non-icon"> 
         </div> 
         <a href="'.$tabdata['alias'].'.html" class="vk-btn vk-btn-transparent text-uppercase">MEER INFORMATIE 
          <i class="fa fa-arrow-right"></i> 
         </a> 
        </div> 
       </div> 
      </div>'; 
      $o++; 
      } 
      echo $tabitem; 
      ?> 
     </div> 
    </div> 
</div> 

私は私の全体のPHPファイル（後にその結果を読み込むことができますどのようにajax post）div内（クラス名tabwrapper）？

明確にする：blokken.phpファイル（クエリを含む）の上に掲示され

Answer 1

あるすべてのことが必要なのは、コールバック関数です：

$('.handmouse').click(function(e){ 
    var alias = $(this).attr("data-attribute"); 
    $.post("ajax/blokken.php", { 
     dienstnaam : alias 
    }, function(data) { 
     $(".tabwrapper").html(data); 
    }); 
    $('.tabwrapper').slideToggle(); 
    $('html, body').animate({ 
     scrollTop: $(".tabwrapper").offset().top 
    }, 2000); 
}); 

私もオブジェクト型との衝突を避けるために、あなたの変数の名前を変更しました。

Answer 2

を$ .postの機能は、機能を期待して、オプションの成功のパラメータを取ります。このパラメータは、データ

$.post({ 
    type: "POST", 
    url: url, 
    data: data, 
    success: function(data){ 
    $('.yourdiv').html(data) // PUT Data in "data" in Div with class .yourdiv 
}, 
    dataType: dataType 
});