Question

我在我的网站上使用php和mysql数据库。

在我的网站上，我有four个不同的菜单。因为每个菜单都有单个div，点击它后必须刷新。

这里刷新意味着它调用php文件，它具有插入，删除和显示来自数据库的特定包含的功能。

我的代码正在刷新div刷新的整页实例。

以下是我的示例代码：

我的 mainpage.php

<div>
            <ul id="headerMenu" class="menu">
        <li rel="menu1"><a href="" >About</a></li>



    <li rel="menu2"><a href="" class="">Display</a></li>

    <li rel="menu3"><a href="" class="">Settings</a></li>
    </ul>
</div>

<div id="menu1" class="menu_content">
    <div class="right-pane">
        <div class="details">

<?php include('about.php'); ?>
    </div>

    <div id="menu2" class="menu_content">
    <div class="right-pane">
        <div class="details">

<?php include('display.php'); ?>
    </div>


    <div id="menu3" class="menu_content">
    <div class="right-pane">
        <div class="details">

   <?php include('Settings.php'); ?>
    </div>

我的 display.php

<?php

/* fetched latest data from database is done */


/* if i use header it going to main page about div */

?>

现在我想在我的显示div中显示数据。

任何人都可以告诉我如何实现这个目标吗？

谢谢。

Answer 1

您可以使用ajax轻松完成。

一个DIV的示例：

<html>
    <body>

    <script type="text/javascript">
    function Ajax(){
    var xmlHttp;
        try{    
            xmlHttp=new XMLHttpRequest();// For Firefox, Opera 8.0+, Safari and Chrome
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // For Internet Explorer
            }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){
                    alert("No AJAX!!!");
                    return false;
                }
            }
        }

    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText;
            setTimeout('Ajax()',10000);
        }
    }
    xmlHttp.open("GET","http://www.examplepage.com/the_page_that_contains_the_div_content",true);
    xmlHttp.send(null);
    }

    window.onload=function(){
        setTimeout('Ajax()',10000);
    }
    </script>

    <div id="ReloadThis">Default text</div>

    </body>
    </html>

Answer 2

现在试试这段代码。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
    $( "button[class='disp']" ).click(function() {
        $(".details").load('profile.php');
    });
});
</script>
</head>
<body>
<div>
    <ul id="headerMenu" class="menu">
        <li rel="menu1"><button>About</button></li>
        <li rel="menu2"><button class="disp">Display</button></li>
        <li rel="menu3"><button>Settings</button></li>
    </ul>
</div>

    <div id="menu1" class="menu_content">

    <div class="right-pane">
        <div class="about">
            <?php //include('about.php'); ?>
        </div>
    </div>

    <div id="menu2" class="menu_content">
        <div class="right-pane">
            <div class="details">
                <?php include('profile.php'); ?>
            </div>
        </div>
    </div>


    <div id="menu3" class="menu_content">
        <div class="right-pane">
            <div class="Settings">
                <?php //include('Settings.php'); ?>
            </div>
        </div>
    </div>

    </div>
</body>
</html>

只需添加profile.php即可。

<?php echo rand(1, 9999); ?>

不要忘记添加JQuery。 http://jquery.com/download/

希望它会对你有所帮助。

由于

Answer 3

将所有功能放在php中以json格式打印json_encode(outputdatafromphp);从javascript中的ajax函数获取该值，并使您的菜单div标签在成功函数内可单击

`

$.ajax({
url:url,
type:'post',
dataType:'json',
success:function(out){  
 $('#menu1').click(out,function(){
   $.each(out,function(ie,value){
       alert(value.data);
}

}
$('#menu2').click(out,function(){
}
});

Answer 4

试

$('.menu_content').on('click',function(e){
    e.stopPropagation();
    var $menu_to_load=$(this).children('.right-pane .details')
    $menu_to_load.load( $menu_to_load.attr('id'));
});
/*make sure your div with class "detail" have id of the page you want to call for them */

Answer 5

lbu说什么。

使用$ .ajax调用将返回所需数据的php程序。对于此示例，请将其保存在var ajax_data

中

在ajax调用的.success事件中，将内容填充到正确的div中，如下所示：

<!-- html definition of display div -->
<div id="displaystuff"></div>

...
// script: 
$('#displaystuf').html(ajax_data)

Answer 6

PHP在服务器端，因此它只能生成“页面”，如果你想修改“页面”的内容而不刷新页面本身，你必须使用javascript来发出ajax请求。所以你可以在你想要的HTMLElement中插入一个php响应。

使用jQuery更容易。 http://api.jquery.com/jquery.ajax/

如何在同一页面刷新不同的div

6 个答案: