Question

我有2个标题。标题2加载在标题1的底部。标题1由导航选项卡组成。我想在点击#navbar > li > a时显示
我希望它捕获文本并将其传递给标头2。但是标头2似乎没有重新加载，因为它是标头，因此我猜没有收到数据。如何将数据传递到标头2并询问标头2更新$PageTitle的值。

header.php

<?php
$DefaultWebsiteTitle = "Planetarium Negara";
$WebsiteTitle = '';
?>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>
    <?php
        if(isset($WebsiteTitle) && !empty($WebsiteTitle)){
            echo $WebsiteTitle;
        }
        else{
            echo $DefaultWebsiteTitle;
        }
    ?>
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css\bootstrap\bootstrap.css">
    <script src="js\bootstrap\bootstrap.bundle.js"></script>
    <script src="js\jquery\jquery-3.3.1.js"></script>

</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-expand-sm">
        <!-- Brand/logo -->
        <a class="navbar-brand" href="#">
            <img src="image\planetarium_logo.jpg" alt="logo" 
style="width:50px; height:50px;">
        </a>

        <!-- Links -->
        <ul id="navbar" class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="TicketSale">Ticket Sale</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="TicketClaim">Ticket Claim</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="TicketRefund">Ticket Refund</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="CustomerSurvey">Customer Survey</a>
            </li>
        </ul>
    </nav>
</div>
<?php include('header2.php');?>
<div id="content" class="container-fluid">

header2.php

<?php
var_dump($_POST['PageTitle']);
$PageTitle = $_POST['PageTitle'];
$DefaultPageTitle = 'Planetarium Negara'
?>

<div class="container-fluid">
    <div class="row"> 
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <?php
                if(isset($PageTitle)&&!empty($PageTitle)){
                    echo $PageTitle;
                }else{
                    echo $DefaultPageTitle;
                }
            ?>
        </div> 
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            time
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            logout
        </div>    
    </div>
</div>

header.js

$(document).ready(function(){
    $('#content').load('TicketClaim.php');
});

$('#navbar > li > a').click(function(){
    var page = $(this).attr('href');
    $('#content').load(page+".php");
    return false;
});

Answer 1

您只需要更改最初包含标题的div的文本节点。为此，只需在“页面标题” div中添加一个id，然后使用jQuery对其进行更改：

<!-- Content omitted -->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="page-title">
Initial Title <!-- This is set by PHP initially -->
</div>

和JavaScript：

$('#navbar > li > a').click(function(){
    var page = $(this).attr('href');
    var text = $(this).text();
    // Here the text is changed before the page load
    // $('#page-title').html(text);
    $('#content').load(page+".php", function() {
      // The text is changed after the page is loaded.
      $('#page-title').html(text);
    });
    return false;
});

Answer 2

如果我明白您的意思..您可以使用.load()将值传递给php，但是当您使用$PageTitle = $_POST['PageTitle'];时，可以使用.post()方法..请参阅下一个代码

$(document).ready(function(){
     // try it directly onload
     $.post("TicketClaim.php" , {PageTitle : 'This Is The New Title'} , function(data){
        $('#content').html(data);
     });

     $('#navbar > li > a').click(function(e){
        e.preventDefault();   // prevent redirect 
        var page = $(this).attr('href').trim();  // get the page name
        var pagetitle = $(this).text(); // change this line with the title you want. I don't know from where you got the titles but here I just assumes thats the text of the anchor
        $.post(page+".php" , {PageTitle : pagetitle} , function(data){
           $('#content').html(data);
        });
    });
});

如何使用javascript或jquery将数据传递到标题而无需重新加载

2 个答案: