通过单击按钮更改PHP include(“link.php”)

时间:2016-10-07 08:46:52

标签: php ajax

如何通过单击按钮更改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?

3 个答案:

答案 0 :(得分:1)

使用具有唯一ID的DIV换行include('link1.html');。点击按钮调用ajax并替换DIV内容。

请尝试使用以下代码。

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

答案 1 :(得分:1)

你可以用jquery做到这一点,例如:

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

不要忘记包含de JQuery

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

答案 2 :(得分:0)

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

我在ajax上并不擅长,但如果你遇到任何问题请告诉我们,这些内容可能有用。