로드하지 않고 한 페이지에서 다른 페이지로 이동

로드하지 않고 한 페이지에서 다른 페이지로 이동

반응형

여러분 안녕하세요, 오늘은 새로운 튜토리얼로 만나보겠습니다. 우리는 페이지를 로드하지 않고 한 페이지에서 다른 페이지로 이동하는 방법을 알아보려고 합니다. 당신이 주의를 기울인다면 아마 알아차렸을 것이다, 어떤 웹사이트에서는 당신이 한 페이지에서 다른 페이지로 이동할 때 로딩이 되지 않는다. 이를 위해 다소 무거운 다른 기술들이 있는데, 예를 들어 PHP Symfony 프레임워크를 사용할 수 있지만 정확한 아키텍처로 파일을 구성해야 하므로 웹사이트가 이미 있을 때 구현하는 것이 더 복잡합니다. 그것이 오늘날 우리가 AJAX를 사용하는 이유입니다. 그리고 그것을 더 빠르게 하기 위해서죠, jQuery.

참고: 모든 파일은 PHP로 되어 있으므로 실행할 수 있는지 확인하십시오.

기본사항

우선, 저는 저희 파일에 대해 다음과 같은 아키텍처를 제안합니다.

반드시 따를 필요는 없지만, 파일 위치는 신중하고 엄격해야 합니다.

이 예에서 우리의 사이트는 www.site.com이라고 불릴 것이고, 만약 당신이 로컬 웹 서버를 사용한다면 당신은 이 이름을 당신의 도메인 이름, 사이트의 IP 또는 당신의 컴퓨터에 있는 당신의 PHP 파일의 위치로 바꾸어야 할 것이다. 로그인하는 동안 index.php 파일에는 홈 페이지가 포함됩니다.php 페이지는 연결 양식을 포함합니다. src 폴더에는 여러 개의 다른 폴더가 포함되어 있으며 여기서 관심 있는 폴더는 php로 각 웹 페이지의 시작과 끝이 포함되어 있습니다. 이 두 파일을 만드는 것이 왜 중요한지는 나중에 알게 될 것입니다.

index.mess

우리의 인덱스 페이지는 매우 단순하며, 그것은 php 제목 변수를 포함하고 있다. 만약 우리가 그것을 단순히 내용을 요구하지 않고 전체로 만들고 싶다면 php. 색인 페이지의 내용은 제목과 단락입니다. 마지막으로, 내용만 요구하지 않고 전체 파일을 원하는 경우 end.php를 포함합니다. 그렇지 않으면 우리는 스크립트로 페이지 이름을 변경합니다. 따라서 색인 페이지는 다음과 같습니다.

I'm the title Morbi tincidunt congue diam, at vestibulum elit tempor a. Donec id mi malesuada, auctor ligula in, aliquam metus. Vestibulum in faucibus massa. Nullam luctus et diam et posuere. Nulla massa metus, mattis et efficitur eu, vehicula in lectus. Sed a sapien quis tellus rhoncus efficitur. Integer sed ultrices nisl, vitae aliquam tellus. document.title = "";

로그인.php

로그인.php 페이지는 기본적으로 제목이 같지 않고 내용이 다르다는 것을 제외하고 동일한 것을 포함합니다:

Login document.title = "";

일찍.php

이전에도 알고 있겠지만, early.php 페이지는 index.php와 login.php의 다른 두 페이지의 시작입니다. 이 파일은 잘 표현된 HTML 문서로 시작해야 합니다. 우리는 jQuery를 포함해야 하며, CDN을 통해 포함하거나 서버나 컴퓨터에서 직접 호스팅할 수 있습니다. 마지막으로 헤더를 추가할 수 있습니다. 파일은 div의 시작으로 끝나며, ID main-content는 다음에 우리 페이지의 내용을 포함할 것이다.

index Login ``` ### 끝입니다. 이 파일은 우리 페이지의 끝을 포함할 것이므로 메인 div나 본문 또는 html 태그와 같은 일부 태그를 닫아야 합니다. 우리는 AJAX 부분을 포함할 것이다. ```js $("a").click(function(e){ e.preventDefault(); $.ajax({ url : $(this).attr('href')+"?section=true", type : 'GET', dataType : 'html', success : function(code_html, statut){ $('#main-content').html(code_html); } }); window.history.pushState("","", $(this).attr('href')); }); ``` AJAX 요청이 어떻게 진행되는지 모르면 복잡해질 수 있는 이 AJAX 코드를 풀어보겠습니다. 먼저 스크립트의 첫 번째 줄은 "누군가가 링크를 클릭할 때"라는 이벤트를 감지합니다. 이 경우 기능을 실행합니다. 두 번째 줄은 AJAX 요청과 호환되는 경우 링크를 로드하지 말라고 브라우저에 지시합니다. 그런 다음 url을 지정하고 parameter section=true로 전달하여 페이지가 완전히 로드되지 않도록 AJAX 요청을 만듭니다. 그런 다음 GET에서 요청 유형을 지정합니다. 성공하면 "주 콘텐츠"의 내용을 새 콘텐츠로 업데이트합니다. 마지막으로 페이지의 url을 수정합니다. ### 스타일 추가 그런 다음 파일을 만들어 스타일을 추가할 수 있습니다. 이것은 src 다음에 style 그리고 css 파일에 배치되며 style.css라고 불린다. 저로서는, 제 파일은 다음과 같습니다. ```js #main-content{ width: 1000px; max-width: 95%; display: block; margin: auto; font-family: cursive; } #main-content h1{ text-align: center; } body{ margin: 80px 0 0 0; } header{ background: whitesmoke; position: fixed; top: 0; left: 0; width: 100%; } header div{ width: 1000px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-end; align-items: center; margin: 13px auto; } .crayons-btn{ margin: 0 5px; padding: 0.5rem 1rem; font-size: 1rem; position: relative; display: inline-block; border-radius: 5px; outline: none; user-select: none; font-family: inherit; line-height: 1.5rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; border: 0px solid; overflow-wrap: normal; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .crayons-btn-main{ background-color: blue; border-color: transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); color: #f9fafa; } .crayons-btn-main:hover{ background-color: #6b6bf1; } .crayons-btn-scd{ background-color: #f1f1f1; border-color: transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); color: #363d44; } .crayons-btn-scd:hover{ background-color: #dddddd; } ``` ### 결과는? 아래에서는 인덱스 또는 로그인 버튼 중 하나를 클릭하면 메인 콘텐츠 부분만 로드되고 나머지는 이동하지 않는 최종 결과를 볼 수 있습니다.  이 튜토리얼 잘 보셨길 바라며 궁금한 점 있으면 댓글로 물어봐 주세요.

from http://information-bada.tistory.com/69 by ccl(A) rewrite - 2021-10-28 04:59:55