jQuery pjax 간단한 예제 요약
- 小云云원래의
- 2018-01-17 14:04:222217검색
pjax는 ajax와 pushState를 사용하여 실제 영구 링크, 페이지 제목 및 작업 뒤로 버튼을 포함한 빠른 탐색 경험을 제공하는 jQuery 플러그인입니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 주로 jQuery pjax 간단한 예제의 요약을 공유합니다.
Ajax의 단점은 Ajax 요청이 기록에 남지 않기 때문에 브라우저의 앞뒤 이동을 파괴한다는 것입니다. pjax는 다릅니다. pjax는 ajax 요청을 기록에 기록하고 주소 표시줄에 반영하므로 사용자가 앞으로 및 뒤로 사용할 수 있기 때문에 ajax+pushState 패키지로 해석됩니다. pjax에는 여러 가지 구현 방법이 있습니다. 여기에서는 jquery.pjax.js를 사용하여 가장 일반적으로 사용되는 jQuery 라이브러리를 사용합니다. 데모 코드의 서버 측은 PHP 스크립팅 언어를 사용합니다.
Pjax는 어디에 사용되나요? Baidu Cloud Disk에 대해 이야기해 봅시다. 모두가 이것을 사용해 봤을 것입니다. Baidu Cloud Disk의 PC측에서는 폴더를 클릭하여 열면 해당 폴더에 있는 파일이 열립니다. 실제로 파일을 표시하는 p는 pjax 기술을 사용합니다. 주소 표시줄이 바뀌고 내용도 바뀌는데 이는 Ajax 요청입니다. 다시 돌아갈 때 상위 폴더의 내용은 기록에 존재하기 때문에 다시 요청할 필요가 없습니다. 또한 개발자는 캐시 및 스토리지 캐싱을 사용하도록 선택할 수도 있습니다.
예 1,
<!DOCTYPE html> <html> <head> <title>pjax</title> <meta charset="utf-8"> </head> <body> <h1>My Site</h1> <p> Go to <a href="res1.php" rel="external nofollow" >第一页</a>.<a href="res2.php" rel="external nofollow" >第二页</a> </p> <p id="container"></p> </body> <script src="../jquery-2.1.4.min.js"></script> <script src="../jquery.pjax.js"></script> <script type="text/javascript"> $(document).pjax('a', '#container') </script> </html>
res1.php
<?php echo "<p style='background:red;'>第一页</p>";
res2.php
<?php echo "<p style='background:red;'>第二页</p>";
설명:
$(document).pjax('a', '#Container') 여기서 a는 트리거 요소이고 #container는 pjax 로드 컨테이너를 반환합니다. 내용에 대해서는 아래도 마찬가지이다.
예 2,
<!DOCTYPE html>
<html>
<head>
<title>pjax</title>
<meta charset="utf-8">
</head>
<body>
<h1>My Site</h1>
<p>
<input type="button" id="clickMe" value="GO">
</p>
<p id="container"></p>
</body>
<script src="../jquery-2.1.4.min.js"></script>
<script src="../jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
$('#clickMe').click(function(){
$.pjax({
url: './res3.php',
container: '#container'
});
});
});
</script>
</html>서버측 코드:
res3.php:
<?php echo "<p style='background:red;'>第三页</p>";
3개의 포괄적인 애플리케이션
window.history.pushState(state, title, url);
/ / https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
// @State 객체: 과거 시점을 기록하는 추가 객체로, 비어 있을 수 있습니다.
// @Page title: 현재 모든 브라우저에서 지원되지 않습니다.
// @Optional URL: 브라우저는 URL이 존재하는지 확인하지 않고 URL만 변경합니다. URL은 교차 도메인이 아닌 동일한 도메인에 있어야 합니다.
PJAX는 실제로 HTML5입니다. window.history.pushState (state, title, url) 이 새로운 API와 기존 AJAX 기술은 일반적으로 새로 고침 없이 페이지 로딩을 달성하는 데 사용됩니다. pushState의 주요 기능은 AJAX 이후에 URL을 변경하고 반환 기록을 추가하는 것입니다. 새로고침 없이 페이지를 로드하면 사용자는 정상적으로 앞뒤로 이동할 수 있으며, JS의 window.history.back() 및 window.history.forward()도 정상적으로 작동할 수 있습니다. 다음은 pushState +를 사용하여 새로고침 없이 페이지를 로드하는 것입니다. jQuery AJAX는 지원되지 않습니다. 브라우저는 자동으로 원래 링크 열기 형식으로 변환됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<script src="jquery.js"></script>
</head>
<body>
<p id="main">
<a href="data.php" rel="external nofollow" >data.php</a>
<script>
$(document).ready(function() {
$('#main').on('click','a',function(e) {
if(window.history.pushState) {
e.preventDefault(); //不跟随原链接跳转
url = $(this).attr('href');
$.ajax({
async: true,
type: 'GET',
url: 'data.php',
data: 'pjax=1',
success: function(data) {
window.history.pushState(null, null, url); //改变URL和添加返回历史
document.title = data.title; //设置标题
$('#main').html(data.main); //设置内容
}
});
} else {
return; //低版本IE8等不支持HTML5 pushState,直接返回进行链接跳转
}
});
});
</script>
</p>
</body>
</html>data.php:
<?php
if(isset($_GET['pjax'])) {
//PJAX请求返回JSON
$arr['title'] = 'Data';
$arr['main'] = '<h1>Data Content</h1>';
//下面这两句是把PHP数组转成JSON对象返回
header('Content-Type: application/json; charset=utf-8');
echo json_encode($arr);
} else {
//常规请求返回HTML
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Data</title>
<script src="jquery.js"></script>
</head>
<body>
<p id="main"><h1>Data Content</h1></p>
</body>
</html>
<?php } ?>Number.
예 2:
<p class="body">
<?php $action_name = $Think.ACTION_NAME; ?>
<!-- 头部哟 -->
<?php if ($action_name == 'news'): ?>
<include file="Brand:header_news" />
<?php elseif ($action_name == 'forum'): ?>
<include file="Brand:header_forum" />
<?php endif; ?>
<!-- 资讯的二级分类 -->
<p class="cb"></p>
<p class="brand-news-nav pjax">
<ul class="clearfix">
<li <?php if($_GET['cat'] == '') echo 'class="selected"'; ?>><a class="first" href="{:U("Brand/$action_name")}">全部</a></li>
<volist name="cat_list" id="vo" key="i">
<li <?php if($_GET['cat'] == $vo['id']) echo 'class="selected"'; ?>><a href="{:U("Brand/$action_name",array('cat'=>$vo['id']))}">{$vo.name}</a></li>
</volist>
</ul>
</p>
<script type="text/javascript">
$(function(){
$(document).pjax('.pjax a', '#pjax-container',{
type:'post',
scrollTo:false,
});
$(document).on('pjax:click', function() {
enable_loading = false;
})
$(document).on('pjax:send', function(){
var str = "<p class='tc mt-10'>加载中...</p>";
$('#pjax-container').html(str);
})
//最后一个右侧加边框
$(".brand-news-nav ul li").last().children('a').addClass('last');
$(".brand-news-nav ul li").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
})
})
</script>
<!-- 文章列表页 -->
<p class="wrap clearfix">
<p class="brand-news-list fl" id="pjax-container">
<include file="Brand:article_pjax" />
</p>
<p class="brand-news-right fr pb-20">
<a href="{$adv3[0]['url']}"><img class="scrollLoading" data-url="{$adv3[0]['images']|showImagePath}" src="__PUBLIC__/index/images/loading270x160.gif" width="260" height="150"></a>
<p class="title mt-10">法律支持</p>
<ul class="bgc-fff">
<volist name="law_list" id="vo">
<a href="{:U('law',array('id'=>$vo['id']))}"><li>{$vo.name}</li></a>
</volist>
</ul>
<button class="btn btn-right mt-10 btn-consult">免费咨询</button>
<script type="text/javascript">
$(function(){
//最后一个需要添加一个last的样式
$(".brand-news-right li:last").addClass('last');
})
</script>
</p>
</p>
</p>Server code
if(is_pjax()){
$this->display('article_pjax');
}else{
$this->display('article');
}//判断是否是pjax请求
function is_pjax(){
return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'];
}주요 아이디어는 .pjax a를 클릭하면 다음 내용을 요청하는 #pjax-container의 내용입니다. 백엔드 처리 중에 pjax 요청인지 여부를 확인해야 합니다. 부분 렌더링이면 전체 렌더링이 필요하지 않습니다.
pjax는 HTML5 기술을 사용하기 때문에 브라우저가 Html5를 지원하지 않으면 웹사이트가 정상적으로 점프로드됩니다. 지원하면 부분 렌더링만 수행합니다(단, 브라우저 주소 표시줄의 URL은 a로 정상적으로 변경됩니다. 링크) ).
위의 js 코드에는 pjax를 구성할 때 scrollTo:false 매개변수가 있다는 점에 유의하세요. 이 매개변수를 추가하면 이 매개변수가 없으면 연결을 클릭한 후에도 웹페이지의 스크롤바가 변경되지 않는다는 의미입니다. 클릭할 때마다 웹페이지 상단으로 이동합니다.
요약: Pjax는 실제로 페이지를 새로 고치지 않고 서버에서 코드 조각을 반환하며 동시에 URL 주소도 수정하므로 리소스 로딩을 절약하고 페이지 로딩 속도를 향상시킵니다.
첨부 파일: pjax의 github 프로젝트 주소
https://github.com/defunkt/jquery-pjax Pjax란 무엇입니까Laravel 5.1에서 Pjax 사용하기탐색 열 PJAX 문제 새로고침위 내용은 jQuery pjax 간단한 예제 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!