Ajax php 页面和 url 使用 load() 函数在加载时更改而不刷新
Ajax php page and url change on load using load() function without refreshing
我最近正在创建一个博客站点，它基于 php 版本 5。6.Now 我花了一个多星期才实现 "ajax page load as well as url changing when click on navigation without refreshing the entire page"。我听从了 stakeoverflow 的许多建议，但 jQuery Forum.But 自己没有做到。我有带 dropdown 的菜单，也有 dropdown-toggle 数据属性。有时我的代码工作正常，但 dropdown 和 dropdown-toggle 不工作。任何人都可以给我实现方法 this.I 我只是 ajax 的初学者。这是我的代码。
header.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;
});
如有任何帮助，我们将不胜感激，或者请提前指教me.Thanks
更新
这是更新
header.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;
});
非常 首先从 <li> 中删除 id="nav_link" 然后添加 class 到 <ul>
我会推荐你一个 class 并添加你的两个 <ul>
发件人：<ul class="nav navbar-nav navbar-right">
收件人：<ul class="nav navbar-nav navbar-right nav_link">
第二个也是<ul>
添加相同的 class
现在改变 jquery
来自：$('#nav_link li a').click(function (e) {
收件人：$('.nav_link li a').click(function (e) {
因为 # 代表 Id 和 .适用于 Class 在此处了解更多信息：Selector
额外更新
有很多方法可以做到这一点，但会让您知道对当前代码有用的方法
如果 URL 中有 # 并且是针对 post 菜单
，则需要停止 jquery 代码
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
if(navPage != "#"){
// your code
}
return false;
});
我最近正在创建一个博客站点，它基于 php 版本 5。6.Now 我花了一个多星期才实现 "ajax page load as well as url changing when click on navigation without refreshing the entire page"。我听从了 stakeoverflow 的许多建议，但 jQuery Forum.But 自己没有做到。我有带 dropdown 的菜单，也有 dropdown-toggle 数据属性。有时我的代码工作正常，但 dropdown 和 dropdown-toggle 不工作。任何人都可以给我实现方法 this.I 我只是 ajax 的初学者。这是我的代码。
header.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;
});
如有任何帮助，我们将不胜感激，或者请提前指教me.Thanks
更新 这是更新
header.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;
});
非常 首先从 <li> 中删除 id="nav_link" 然后添加 class 到 <ul>
我会推荐你一个 class 并添加你的两个 <ul>
发件人：<ul class="nav navbar-nav navbar-right">
收件人：<ul class="nav navbar-nav navbar-right nav_link">
第二个也是<ul>
添加相同的 class
现在改变 jquery
来自：$('#nav_link li a').click(function (e) {
收件人：$('.nav_link li a').click(function (e) {
因为 # 代表 Id 和 .适用于 Class 在此处了解更多信息：Selector
额外更新
有很多方法可以做到这一点，但会让您知道对当前代码有用的方法
如果 URL 中有 # 并且是针对 post 菜单
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
if(navPage != "#"){
// your code
}
return false;
});