Refresh_javascript 팁 없이 pjax를 사용하여 페이지 URL 변경

우리 모두는 Ajax가 브라우저에 비동기 로딩 기능을 제공하여 데이터 확인, 부분 새로 고침 등의 측면에서 사용자 경험을 향상시킨다는 것을 알고 있지만 동시에 다음과 같은 문제가 있습니다.

1. 페이지 내용은 새로고침 없이 변경할 수 있지만, 페이지 URL은 변경할 수 없습니다
2. 해시 방법은 브라우저의 앞으로 및 뒤로 문제를 잘 처리할 수 없습니다

기존 Ajax에서 발생하는 문제를 해결하기 위해 HTML5에서는 히스토리 API를 강화하고 pushState, replacementState 인터페이스, popstate 이벤트를 추가했습니다. 여기서는 자세히 소개하지 않겠습니다. 이 지식이 없는 학생들은 먼저 관련 정보를 읽어보는 것이 좋습니다.

pjax 플러그인은 pushState 및 ajax 작업을 캡슐화하여 이러한 유형의 웹 애플리케이션을 개발하는 간단한 방법을 제공합니다. 구체적인 단계는 다음과 같습니다.

부분 업데이트가 필요한 컨테이너 정의

pjax를 초기화하고 URL을 듣습니다

코드 복사 코드는 다음과 같습니다.

$(함수(){
//pjax
$(document).pjax('a', '#container');
$.pjax.reload('#container');
})

백엔드가 pjax 요청을 처리합니다

백엔드의 처리 로직은 먼저 pjax 요청인지 확인하는 것입니다. 그렇다면 요청 매개변수에 따라 로컬 콘텐츠를 반환하고, 그렇지 않으면 레이아웃 레이아웃을 반환한 다음 `$.pjax.reload로 pjax를 시작합니다. ('#컨테이너');` 물어보세요. 위의 논리를 바탕으로 다음과 같은 코드를 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var pjaxFilter = function(req, res, next) {
if (req.get('X-PJAX')) {
다음();
반품;
}
//pjax 요청이 아닌 경우 레이아웃 템플릿을 직접 반환
res.render('layout', { title: 'Pjax 간단한 데모' });
};
router.get('/', pjaxFilter, function(req, res) {
res.render('index');
});
router.get('/poem/:id', pjaxFilter, function(req, res) {
var poemId = req.params.id;
res.render('poem/' poemId);
})

전체 코드: pjax-demo

이것은 pjax의 가장 기본적인 기능일 뿐입니다. pjax는 풍부한 API를 제공합니다. jquery-pjax
를 방문하세요.