如何在不重新加载所有页面的情况下更改DIV中的PHP文件？_Php

如何在不重新加载所有页面的情况下更改DIV中的PHP文件？

php

如何在不重新加载所有页面的情况下更改DIV中的PHP文件？,php,Php,我知道有些文章是关于这类事情的，但我搞不懂。另外，我是编程新手，所以我的问题可能很愚蠢我不想做的就是用可点击的按钮（button1、button2、button3、button4）更改标签中的4个内容当页面加载时，用户只能看到content_1.php <div id="content_box"> <? include 'content_1.php'; include 'content_2.php'; include 'content_3.php'; include '

我知道有些文章是关于这类事情的，但我搞不懂。另外，我是编程新手，所以我的问题可能很愚蠢

我不想做的就是用可点击的按钮（button1、button2、button3、button4）更改标签中的4个内容

当页面加载时，用户只能看到content_1.php

<div id="content_box">
<? 
include 'content_1.php';
include 'content_2.php';
include 'content_3.php';
include 'content_4.php';

?>
</div>

也许有人能举个例子

谢谢。

使用ajax请求，以下链接仅供参考：

使用ajax请求，以下链接供参考使用：

有更多的解决方案，但最简单的是，如果您创建了以下四个链接：

<a href="?content=1">show content 1</a>

然后在PHP端，通过用户输入创建逻辑：

<div id="content_box">
<?php 
switch($_GET['content']){
case 1: include 'content_1.php'; break;
case 2: include 'content_2.php'; break;
case 3: include 'content_3.php'; break;
case 4: include 'content_4.php'; break;
default: include 'content_1.php';
?>
</div>

顺便说一下，不建议使用短标记，因为由于配置原因，短标记在任何地方都不受支持。

有更多的解决方案，但最简单的是，如果您创建了以下四个链接：

<a href="?content=1">show content 1</a>

然后在PHP端，通过用户输入创建逻辑：

<div id="content_box">
<?php 
switch($_GET['content']){
case 1: include 'content_1.php'; break;
case 2: include 'content_2.php'; break;
case 3: include 'content_3.php'; break;
case 4: include 'content_4.php'; break;
default: include 'content_1.php';
?>
</div>

顺便说一下，不建议使用短标记，因为由于配置原因，短标记在任何地方都不受支持。

要做到这一点，您需要使用一些Java脚本，但与其发明自己的，不如使用现有的东西。试试这个，这应该是你需要的。之后，您可以使用ajax请求让用户只加载他需要的部分

祝你好运

要做到这一点，您需要使用一些Java脚本，但与其发明自己的脚本，不如使用现有的脚本。试试这个，这应该是你需要的。之后，您可以使用ajax请求让用户只加载他需要的部分

祝你好运

您可以（A）将所有内容发送到客户端并在客户端完全隐藏和显示，或者（B）发送第一块内容并根据需要加载其余内容（通过AJAX）

在两者之间进行选择时，需要考虑以下几点：

除初始内容外，用户多久会看到一次其他内容（几次）→ B:只发送需要的信息，少数人会提出另一个请求）

我们在谈论多少数据（很少）→ 答：每次都发送，请求更少）

是否包括

-ing一个PHP文件有副作用（不应该！）（是的→ B:只包括要求的内容）

对于第一种策略，您可以：

<script type="text/javascript">
function show(box) {
    for (var i = 1; i <= 4; i++) {
        document.getElementById('content_' + i).style = (i === box ? 'block' : 'none');
    }
}
</script>
<div id="content_box">
    <div id="content_1"><?php include 'content_1.php'; ?></div>
    <div id="content_2" style="display: none;"><?php include 'content_2.php'; ?></div>
    <div id="content_3" style="display: none;"><?php include 'content_3.php'; ?></div>
    <div id="content_4" style="display: none;"><?php include 'content_4.php'; ?></div>
</div>
<a href="#" onclick="show(1);">Show #1</a>
<a href="#" onclick="show(2);">Show #2</a>
<a href="#" onclick="show(3);">Show #3</a>
<a href="#" onclick="show(4);">Show #4</a>


功能显示（方框）{
对于（var i=1；i

注意
这假设交互必须在同一页面上。如果需要加载整个页面，只需继续。

您可以（a）将所有内容发送到客户端并在客户端完全隐藏和显示，或者（B）发送第一个内容块并按需加载其余内容（通过AJAX）

在两者之间进行选择时，需要考虑以下几点：

除初始内容外，用户多久会看到一次其他内容（几次）→ B:只发送需要的信息，少数人会提出另一个请求）

我们在谈论多少数据（很少）→ 答：每次都发送，请求更少）

是否包括

-ing一个PHP文件有副作用（不应该！）（是的→ B:只包括要求的内容）

对于第一种策略，您可以：

<script type="text/javascript">
function show(box) {
    for (var i = 1; i <= 4; i++) {
        document.getElementById('content_' + i).style = (i === box ? 'block' : 'none');
    }
}
</script>
<div id="content_box">
    <div id="content_1"><?php include 'content_1.php'; ?></div>
    <div id="content_2" style="display: none;"><?php include 'content_2.php'; ?></div>
    <div id="content_3" style="display: none;"><?php include 'content_3.php'; ?></div>
    <div id="content_4" style="display: none;"><?php include 'content_4.php'; ?></div>
</div>
<a href="#" onclick="show(1);">Show #1</a>
<a href="#" onclick="show(2);">Show #2</a>
<a href="#" onclick="show(3);">Show #3</a>
<a href="#" onclick="show(4);">Show #4</a>


功能显示（方框）{
对于（var i=1；i

注意
这假设交互必须在同一个页面上。如果需要完整的页面加载，只需使用。

我认为，您应该使用jQuery的AJAX API以轻松的方式实现相同的功能，而不是“纯”AJAX（这也很好，但其代码有点长，不太容易理解）

例如，要加载文件，您应该使用jQuery的函数。
更具体地说，在您的代码中是这样的：

$('#content_box').load('content_1.php');

但我想展示一个完整的示例，它也可以在没有JavaScript或禁用JS的浏览器中工作，因为它也可以理解$\u GET参数。有三种解决方案：1.选择和选项标记，2.按钮，3.单选按钮

因此，代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Load contents with jQuery</title>
        <!-- jQuery CDN: http://docs.jquery.com/Downloading_jQuery#CDN_Hosted_jQuery -->
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>

        <!-- The code with jQuery -->
        <script type="text/javascript">
            $(document).ready(function(){

                $('#change_content_select').submit(function(){
                    var which_to_load = $('#sel_number').val(),
                    source_of_file = 'data/content_'+which_to_load+'.php';
                    $('#content_box').load( source_of_file );
                    return false;
                });

                $('#button_1, #button_2, #button_3, #button_4').click(function(){
                    var which_to_load = ( $(this).attr('id')+"" ).replace('button_', ''),
                    source_of_file = 'data/content_'+which_to_load+'.php';
                    $('#content_box').load( source_of_file );
                    return false;
                });

                $('#change_content_radio').submit(function(){
                    if( $('input[name=nrOfPage]:checked').val() === undefined ){
                        alert('Select which page to load first...');
                        return false;
                    }
                    var which_to_load = $('input[name=nrOfPage]:checked').val(),
                    source_of_file = 'data/content_'+which_to_load+'.php';
                    $('#content_box').load( source_of_file );
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <!-- Let's do it with select tags -->
        <div id="content_changing_select_tag">
            <b>Page to load with select:</b><br />
            Which page would you like to load?
            <form method="get" id="change_content_select" action="">
                <p>
                    <select id="sel_number" name="nrOfPage">
                        <option value="1">1st page</option>
                        <option value="2">2nd page</option>
                        <option value="3">3rd page</option>
                        <option value="4">4th page</option>
                    </select>
                    <!-- We put this submit button for compatibility with browsers with JavaScript disabled -->
                    <input type="submit" value="Change content" />
                </p>
            </form>
        </div>
        <hr />

        <!-- Let's do it with buttons -->
        <div id="content_changing_buttons">
            <b>Page to load with buttons:</b><br />
            Which page would you like to load?
            <form method="get" id="change_content_buttons" action="">
                <p>
                    <input value="1" type="submit" id="button_1" name="nrOfPage" />
                    <input value="2" type="submit" id="button_2" name="nrOfPage" />
                    <input value="3" type="submit" id="button_3" name="nrOfPage" />
                    <input value="4" type="submit" id="button_4" name="nrOfPage" />
                </p>
            </form>
        </div>
        <hr />

        <!-- Let's do it with radio buttons -->
        <div id="content_changing_radio">
            <b>Page to load with radio:</b><br />
            Which page would you like to load?
            <form method="get" id="change_content_radio" action="">
                <p>
                    <input type="radio" name="nrOfPage" value="1" />
                    <input type="radio" name="nrOfPage" value="2" />
                    <input type="radio" name="nrOfPage" value="3" />
                    <input type="radio" name="nrOfPage" value="4" />
                    <!-- We put this submit button for compatibility with browsers with JavaScript disabled -->
                    <input type="submit" value="Change content" />            
                </p>
            </form>
        </div>
        <hr />
        <div>OK, here comes the content...</div>

        <div id="content_box">
            <?php
            // default number of page to load
            $defaultPageNumber = '1';
            // check if content number is set
            $numberOfPageToInclude = isset($_GET['nrOfPage']) ? $_GET['nrOfPage'] : $defaultPageNumber;

            $options = array(
                'options' => array(
                    'min_range' => 1,
                    'max_range' => 4,
                    ));

            if (filter_var($numberOfPageToInclude, FILTER_VALIDATE_INT, $options) !== FALSE) {
                include 'data/content_' . $numberOfPageToInclude . '.php';
            } else {
                echo '<span style="color:red;">Wrong page number, including default page!</span><br />';
                include 'data/content_1.php';
            }
            ?>
        </div>
    </body>
</html>


使用jQuery加载内容
$（文档）.ready（函数（）{
$（'#更改内容_选择'）。提交（函数（）{
var which_to_load=$（'sel_number'）.val（），
source_of_file='data/content_u'+加载哪个文件+'.php'；
$（“#内容_框”）.load（_文件的源_）；
返回false；
});
$（'按钮1，'按钮2，'按钮3，'按钮4'）。单击（函数（）{
var which_to_load=（$（this）.attr（'id'）+“”）。replace（'button_'），“”），
source_of_file='data/content_u'+加载哪个文件+'.php'；
$（“#内容_框”）.load（_文件的源_）；
返回false；
});
$（'#更改内容_收音机'）。提交（函数（）{
if（$（'input[name=nrOfPage]：选中'）.val（）==未定义）{
警报（'选择要首先加载的页面…'）；
返回false；
}
var which_to_load=$（'input[name=nrOfPage]：checked'）.val（），
source_of_file='data/content_u'+加载哪个文件+'.php'；
$（“#内容_框”）.load（_文件的源_）；
返回false；
});
});
要加载的页面，请选择：

您要加载哪一页？

第一页
第二页
第三页
第4页
<h1>This is content <span style="color:red;font-size: 125%;">4</span>!</h1>