通过Ajax发送值后如何加载整个文件

Question

I got a few blocks that can be clicked and when clicked it posts a name to my php file. The query in my php file then changes accordingly. My only question is, I know how to post the value to my php file, but how do I return the entire result inside a div on my homepage?

My blocks:

<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>

My 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);
});

My php file:

<?
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>

How can I load my entire php file (the result of it after the ajax post) inside a div (with the classname tabwrapper)?

To clarify: blokken.php is the file posted above (with the queries)

Answer 1

All that's needed is a callback function:

$('.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);
});

I also renamed your variable to avoid collisions with object types.

Answer 2

the $.post function takes an optional success parameter which expect a function. The parameter of this is your Data

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