クリックするとPHP include（ "link.php"）が表示されます

Question

クリックするとPHP include（ "link.html"）の変更方法が表示されます。

<?php include('link1.html')?> 
BUTTON 1 change <?php include('link1.html')?> to <?php include('link2.html')?> 
BUTTON 2 change <?php include('link1.html')?> to <?php include('link3.html')?> 
BUTTON 3 change <?php include('link1.html')?> to <?php include('link4.html')?> 

ページを更新することなくこれを行う方法。 ajaxを使って？

Answer 1

include('link1.html');ユニークなIDを持つDIVでラップします。ボタンをクリックすると、ajaxを呼び出してDIVコンテンツを置き換えます。

下記のコードで試してください。

あなたはjqueryの、一例であることを行うことができます

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="DIVID"> 
    <?php 
     include('link1.html'); 
    ?> 
</div> 
<button onclick="btnclick('link2.html')">Button 1</button> 
<button onclick="btnclick('link3.html')">Button 2</button> 
<button onclick="btnclick('link3.html')">Button 3</button> 
<script type="text/javascript"> 
    function btnclick(_url){ 
     $.ajax({ 
      url : _url, 
      type : 'post', 
      success: function(data) { 
      $('#DIVID').html(data); 
      }, 
      error: function() { 
      $('#DIVID').text('An error occurred'); 
      } 
     }); 
    } 
</script> 

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button onclick="include($(this))" value="2">Button 1</button> 
<button onclick="include($(this))" value="3">Button 2</button> 
<button onclick="include($(this))" value="4">Button 3</button> 
<div id="included_page"><?php include('link1.html')?></div> 

function include(elem) 
{ 
    var page = elem.val(); 
    $.ajax({ 
    url: "link" + page + ".html", 
    type: "GET" 
    }).done(function(msg) { 
    $('#included_page').html(msg); 
    }) 
    }) 
} 

何か問題が私たちに知らせてもらうならば、私はアヤックスで素晴らしいではありませんよしかし、これらの線に沿って何かが動作する可能性があります。

Answer 3

：

PHPコード：

<div id="mainDiv"><?php include('link1.html')?></div> 
<button onclick="change2()">Button 1</button><br /> 
<button onclick="change3()">Button 2</button><br /> 
<button onclick="change4()">Button 3</button><br /> 

のjQueryコード

function change2() { 
    $('#mainDiv').load('link2.html'); 
} 

function change3() { 
    $('#mainDiv').load('link3.html'); 
} 

function change4() { 
    $('#mainDiv').load('link4.html'); 
} 

ドを含めることを忘れないでください。 JQuery

<script src="jquery/jquery.min.js"></script>