php - 使用 load() 函数加载 Ajax php 页面和 url 更改而不刷新
问题描述
我最近正在创建一个博客站点，它基于 php 5.6 版。现在我被困了一个多星期来实现“ajax 页面加载以及在单击导航时更改 url 而无需刷新整个页面”。我遵循了stakeoverflow 和jQuery 论坛的许多建议。但自己做得不好。我有菜单，dropdown也有dropdown-toggle数据属性。有时我的代码工作正常，但dropdown不会dropdown-toggle工作。谁能给我实现这一目标的方法。我只是ajax的初学者。这是我的代码。
头文件.php
<?php
require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
<?php include "../scripts/js.php";?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p><a href="../Template/contact.php">PHONE: 01971982959</a> </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<a href="<?php echo $socialResult['fb']; ?>" target = "_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['tw']; ?>" target = "_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['pin']; ?>" target = "_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['gplus']; ?>" target = "_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['ln']; ?>" target = "_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>><a href="../Template/index.php">Home <span class="sr-only">(current)</span></a></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
<a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Post<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><a href="../Template/Excellent.php?id=<?php echo $result['id'];?>"><p><?php echo $result['title'];?></p></a></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li id="nav_link"
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> ><a href="../Template/contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('#nav_link li a').click(function (e) {
e.preventDefault();
var navPage=$(this).attr('href');
// alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$('.dropdown-toggle').dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
任何帮助将是appriciate或请赐教。谢谢提前
更新 这里是更新
头文件.php
<?php
// require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p><a href="../Template/contact.php">PHONE: 01971982959</a> </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<a href="<?php echo $socialResult['fb']; ?>" target = "_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['tw']; ?>" target = "_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['pin']; ?>" target = "_blank"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['gplus']; ?>" target = "_blank"> <i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="<?php echo $socialResult['ln']; ?>" target = "_blank"> <i class="fa fa-linkedin" aria-hidden="true"></i></a>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right nav_link">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>><a href="../Template/index.php">Home <span class="sr-only">(current)</span></a></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Post<span class="caret"></span></a>
<ul class="dropdown-menu nav_link" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><a href="../Template/Excellent.php?id=<?php echo $result['id'];?>"><p><?php echo $result['title'];?></p></a></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> ><a href="../Template/contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
//alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$(".dropdown-toggle").dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
解决方案
非常首先删除id="nav_link"from<li>并添加然后添加类<ul>
我会推荐你一门课，并添加你的两门课<ul>
从：<ul class="nav navbar-nav navbar-right">
至： <ul class="nav navbar-nav navbar-right nav_link">
也为第二个<ul>
添加相同的类
现在在jquery中更改
从：$('#nav_link li a').click(function (e) {
至：$('.nav_link li a').click(function (e) {
因为 # 代表 Id 和 . 用于类在此处了解更多信息：选择器
额外更新
有很多方法可以做到这一点，但会让你知道一种对当前代码有用的方法，如果#URL 中有你需要停止 jquery 代码并且那是用于发布菜单
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
if(navPage != "#"){
// your code
}
return false;
});
推荐阅读
- python - python：定义修改最后一个命令的热键？
- javascript - 无法导入反应模块
- json - 用于显示和操作 JSON - 周和预订时间的结构
- ios - Swift 观察协议中 var 变化的值
- r - 在R中设置种子
- python - 在运行时在python中添加一个新的父类
- sql - select bigger value's records in a query result
- javascript - 我如何从对象中获取选项？
- c - 输入从 A 跳到 B 并且都打印在同一行中。macOS C
- php - buttons with 2 lines of text are larger than buttons with 1 line of text, but i need them all to be the same size as the 1 line