웹 기술의 지속적인 발전으로 인해 웹사이트 접속 속도는 점점 빨라지고 있습니다. 그러나 블로그, 뉴스 사이트 또는 소셜 미디어와 같이 페이지를 자주 새로 고쳐야 하는 일부 애플리케이션의 경우 빠른 웹 사이트라도 사용자는 정보를 얻거나 일부 작업을 수행하기 전에 각 페이지가 완전히 로드될 때까지 기다려야 합니다. Pjax 기술은 이 문제를 해결하는 데 도움이 될 수 있으며 ThinkPHP6에서 Pjax를 사용하는 것도 매우 쉽습니다.
Pjax란 무엇인가요?
Pjax의 전체 프로세스는 PushState+Ajax입니다. 간단히 말하면, 전체 페이지를 새로 고치지 않고 웹사이트의 내용을 업데이트하기 위해 페이지를 부분적으로 새로 고치는 기술입니다. Pjax는 이를 달성하기 위해 JavaScript 및 XMLHttpRequest 기술을 사용하고 HTML5의 새로운 pushState API와 결합하여 브라우저의 URL이 변경되지 않도록 합니다.
Pjax에서 각 페이지는 "컨테이너"라고 불리는 여러 부분으로 나뉩니다. 사용자가 링크를 클릭하거나 양식을 제출할 때만 특정 컨테이너를 업데이트하세요. 예를 들어, 블로그 페이지에서 한 컨테이너에는 모든 게시물 목록이 포함될 수 있고, 다른 컨테이너에는 선택한 게시물의 세부 정보가 표시될 수 있습니다. 이것의 이점은 특정 콘텐츠를 더 빠르게 로드할 수 있어 웹사이트의 속도와 성능을 향상시키는 동시에 사용자 경험도 향상시킬 수 있다는 것입니다.
ThinkPHP6에서 Pjax 사용
ThinkPHP6에서 Pjax를 사용하려면 먼저 Pjax 플러그인을 설치해야 합니다. 다음과 같이 설치하세요.
composer require ngyuki/pjax
그런 다음 컨트롤러에 다음 코드를 추가하여 pjax를 활성화하세요.
if ($this->request->isPjax()) { // 如果是Pjax请求,禁用布局文件 $this->view->engine->layout(false); }
보기 파일에 다음 코드를 추가하여 Pjax 요청에서 어떤 컨테이너를 업데이트해야 하는지 결정하세요.
// 设置pjax容器 <div id="pjax-container"> <?php echo $content; ?> </div> // 将pjax链接添加到页面 <a href="http://www.example.com/page" data-pjax="#pjax-container">下一页</a>
Here, < code> #pjax-container는 업데이트해야 하는 컨테이너의 ID이고, data-pjax
속성은 Pjax 요청에서 처리해야 하는 링크를 브라우저에 알려줍니다. 사용자가 링크를 클릭하면 컨테이너의 콘텐츠만 업데이트되고 머리글 및 바닥글과 같은 다른 페이지 요소는 변경되지 않습니다. #pjax-container
是需要更新的容器的ID,data-pjax
属性告诉浏览器哪些链接应该在Pjax请求中处理。当用户单击链接时,只有容器中的内容会更新,而其他页面元素(如头部和页脚)将保持不变。
当您需要使用后端渲染视图时,您可以在模板上设置一个pjax
变量。 如果启用了pjax
pjax
변수를 설정할 수 있습니다. pjax
가 활성화되면 ajax 레이아웃을 사용할 수 있습니다. 예: // 启用Pjax时使用不同的布局 if ($pjax) { $this->view->engine->layout('layouts/ajax'); }
위 내용은 ThinkPHP6에서 Pjax 기술 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!