PJAX 结合了 HTML5 的 window.history.pushState API 和传统的 AJAX 技术，使得页面可以在不刷新整个页面的情况下加载新内容，并且能够正常使用浏览器的后退和前进按钮。
<!DOCTYPE html> <html charset="utf-8"> <head> <xxx>Index</xxx> <xxx src="jquery.js"></xxx> </head> <body> <div id="main"> <a href="data.php">data.php</a> </div> <xxx> $(document).ready(function() { $('#main').on('click', 'a', function(e) { if (window.history.pushState) { e.preventDefault(); // 不跟随原链接跳转 var url = $(this).attr('href'); $.ajax({ async: true, type: 'GET', url: url, data: { 'pjax': 1 }, success: function(data) { window.history.pushState(null, null, url); // 改变 URL 和添加返回历史 document.xxx = data.xxx; // 设置标题 $('#main').html(data.main); // 设置内容 } }); } else { return; // 低版本 IE8 等不支持 HTML5 pushState, 直接返回进行链接跳转 } }); }); </xxx> </body> </html>
后台代码
<?php if (isset($_GET['pjax'])) { // PJAX 请求返回 JSON $arr['xxx'] = '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 charset="utf-8"> <head> <xxx>Data</xxx> <xxx src="jquery.js"></xxx> </head> <body> <div id="main"><h1>Data Content</h1></div> </body> </html> <?php } ?>版权声明：本文为原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
关注微信公众号："cq_xifan";
