JQuery Ajax PHP Dynamic Content Loading

이 예제에서는 jQuery와 Ajax를 사용하는 방법을 보여줄 것이다 PHP에서 동적으로 내용을로드하는 방법 서버 측

그래서 이것이 예입니다 기본적으로 내용을로드하는 버튼 두 번째 상자에로드 할 첫 번째 상자와 두 번째 단추 그리고 우리는 약간의 모든 버튼을 여기에서 지우십시오 우리가 테스트하는 동안 연습 할 수 있도록 어떻게 작동하는지보십시오 여기에 우리는이 HTML 파일을 가지고 있습니다

예 기본적으로 화면에 표시 할 요소가 있습니다 JavaScript는 실제 화면과 직접 관련이 있습니다 파일의 맨 아래를 보면 HTML이 보입니다 특히 라인 45 우리는 두 버튼의 입력 태그

둘 다 콘텐츠라는 클래스 (CSS)를 공유합니다 대시 버튼 그리고 우리는 클래스 (CSS)를 사용하고 있습니다 클릭 이벤트를 처리합니다 그리고 우리는 정상에 오른다

이 파일은 12 행에서 jQuery 검색을 사용하여 찾고있다 클래스 콘텐츠 버튼을 클릭하고 클릭 이벤트 그런 다음이 두 가지를 다시 살펴보십시오 다시 한번 우리는 그것들이 만들어 낸 속성 data-content-id를 가지고 있다는 것을 알 수 있습니다 둘 다 그 속성을 공유합니다

그리고 우리는 content01과 content02 값을 할당했습니다 각 버튼에 대해 우리가 다시 와서 클릭을 볼 때 이 둘의 처리기는 우리가 찾고있는 것을 볼 수 있습니다 jQuery를 사용하여이 속성을 바로 사용할 수 있습니다 attr 메서드를 호출하고 값을 가져옵니다 이러한 특정 단추가 가지고있는 것입니다

그래서 그것은 우리가 어느 클릭을했는지에 달려 있습니다 content01 또는 content02 이를 contentId라는 변수에 저장합니다 그런 다음이 클릭 핸들러에서 발생하는 다음 작업은 함수를 호출하는 것입니다 전화 한 sendServiceRequest

그리고 그것은 ajaxjs 파일에 있습니다 우리는 그것에 올 것이다 조금 나중에 이것은 우리가 작성한 일반적인 스크립트로, 하나 이상의 목적

여기에는 세 가지 논증이 필요하며 여기에서 볼 수 있습니다 이 경우 이름 인 첫 번째 인수를 전달합니다 값 쌍 인터넷에서 볼 수있는 전형적인 방식입니다 그래서 그 이름이 서버가 찾고있는 콘텐츠 ID입니다

그리고 나서 그것은 다음과 같아야합니다 값 및 값은 content01 content02 매우 편리합니다 그래서 두 번째 논쟁은 네트워크 연결이 정상적으로 작동하면 콜백 기능 다른 말로하면 네트워크 오류없이 서버에서 송수신합니다 서버는 jQuery가 기대하고 있습니다

우리는 그것이 일어날 것을 볼 것이다 HTML 형식이어야합니다 우리가 만든이 콜백 함수에서 단기 변수는 contentId를 취하여 다시 content01 또는 content02 그것을 파운드 기호 또는 해시 표시로 앞에 붙이면 CSS id 그리고 우리는 단순히 jQuery를 사용하고 jQuery 메서드를 호출한다 내부 내용을 업데이트하십시오

실제 태그 이제 데이터가 다시 돌아옵니다 서버가이 변수 "data"에 있습니다 그리고 그것은 단지 평범한 HTML이되어야합니다 그래서 여기있는 모든 사람들은 이 태그에 HTML

우리가 돌아 오면 우리는 태그가 있다는 것을 보게 될 것입니다 id는 content01과 content02입니다 그리고 그들은 첫 번째로드 시작시 비어 있습니다 HTML의 프로그램의 그리고 여기까지 우리는 해당 ID를 찾으십시오 : 파운드 콘텐츠 01 및 02 html 함수를 호출하고 이 "데이터"로 내부 콘텐츠에 태그를 지정합니다 그리고 다른 항목은 우리가 가지고있는 것입니다

버튼 – 우리가 조금만 실험 할 수 있도록 그들을 지우고 특정 이드로 내용 삭제 버튼 여기에는 jQuery가 있습니다 그걸 검색하면 ID로 해당 버튼을 찾습니다 그것의 클릭 된 메소드는 jQuery를 위해 호출된다 우리는 그것을 처리 할 수있는 기능을 가지고 있습니다

그리고 우리는 단순히 찾고 있습니다 모든 클래스 대시 콘텐츠가있는 요소 – 죄송합니다 방금 콘텐츠라고 부르는 수업입니다 그리고 그것들을 아무 것도없는 HTML 그래서 우리가 여기 와서 우리가 사용하는 p 태그 콘텐츠라는 공통 클래스가 있습니다

그래서 이것은 여러분이 일반적으로 jQuery에서 사용 프로그래밍을 최적화하십시오 그래서보다는 두 버튼을 모두 지울 수있는 독특한 방법 콘텐츠와 관련이있는 위치에 있습니다 이 클릭 이벤트를 호출하십시오 이 파일을 보면 꽤 많이 볼 수 있습니다 그것을 시도하고 그것을 시도하십시오

그리고 우리 모두는 ajaxjs를 가지고 있습니다 스크립트 파일이며 이것은 단지 일반적인 것입니다 기능이 작성되었습니다 그것이 우리가 HTML 파일에서 부르는 이름입니다 이것이 이름 값 쌍이 예상됩니다

그리고 그것은 반드시 하나를 기대하지 않습니다 여러 개의 이름 값 쌍을 조합하여 사용할 수 있습니다 그리고 성공을위한 콜백 함수 실패를위한 콜백 함수 여기, 여기있다 jQuery 아약스 메소드가 호출되고 일부 속성이 호출된다

게시물을 보내고 있습니다 PHP로 그리고 이것은 데이터를받는 PHP 프로그램의 이름입니다 그 순간에 이것은 인수로 보내진 값인 이름 값 쌍입니다

그리고 아약스는 HTML을 다시 찾고 있습니다 따라서 HTML에서 get_contentphp 스크립트는 호출 할 함수이며 기본적으로 두 번째 함수와 함께 전달 된 참조 함수를 콜백합니다 논의 또한 동일한 데이터 값, 인수 값을 전달합니다

Ajax의 성공 속성 다시 전화한다 그리고 우리는 실패 결과로 우리가하는 것과 똑같은 것을 봅니다 아약스 출신 그리고 여기에 전달 된 기능이 있습니다 그리고 우리는 데이터를 다시 전달합니다

콘솔 로그가 몇 가지 있습니다 디버깅을 위해 코멘트에서 제거하고 당신은 그들을 볼 수 있습니다 콘솔 창과 일종의 상황을 알려줍니다 우리가 볼 필요가있는 유일한 항목은 우리는 이것을 선택했습니다 그리고 당신은 우리의 스타일이 다소 단순하다는 것을 알 수 있습니다

그러나 CSS 파일을 조금만 보도록하겠습니다 우리가 가진 것을 보아라 이 파일은 Meyer의 CSS를 가져 오는 CSS 파일입니다 CSS 파일을 재설정하여 모든 요소를 모든 다른 웹 브라우저에 대한 공통 값 그러면 어디서 볼 수 있습니다

우리 자신의 응용 프로그램을 위해 여기 몇 가지를 조정합니다 그리고 이것은 Meyer의 CSS입니다 일부 재설정에 익숙하다면 일을 설정합니다 같은 값 이 모든 태그가 다음으로 설정 될 것입니다

margin : 0과 높이와 크기와 같은 다양한 값 글꼴 그리고 우리는 또한 다음을 포함하고 있습니다 추가 된 html5 의미 태그를 처리하는 기능 그리고 우리는 header 태그를 사용하고 있습니다 당신은 그것을 볼 수 있습니다

단지 페이지의 제목을위한 것입니다 이제 서버 측에서 두 개의 PHP 스크립트 첫 번째는 컨트롤러의 단순한 유형입니다 요청이 들어와야하고 반환 할 수있는 유일한 방법이 있습니다 html

10 번에서 13 번까지는 표준입니다 사람들이 PHP에서 사용하는 헤더 리턴 파일의 캐싱을 최소화하거나 제거하십시오 캐싱을 어떻게 처리 할 것인지에 따라이를 포함 할 수도 있고 포함하지 않을 수도 있습니다 핵심은 17 행에 있지만 여기에서는 최신 PHP를 사용하고 있습니다 유효성 검사 필터 및 우리가하는 일은 이름 값 쌍 이름으로 제공되는 content-id 클라이언트 측 Ajax 스크립트 및 문자열인지 확인하고 재미있는 문자 나 시도가 없는지 확인합니다

우리 시스템에 침입했다 변수에 저장하는 중이었습니다 그것은 이드와 비슷한 이름입니다 해당 content_id는 약간의 차이점과 일반적인 PHP 변수 이름 지정 그런 다음 22 번 줄에서 filter_var 함수, 실제로 17 번 줄에 거짓 값을 만듭니다

변수가 거짓임을 확인하기 만하면됩니다 그렇다면 우리는 단지 다시 에코 할 것이다 우리를 잘못 보내는 것에 대한 기본값으로 원하는 것은 무엇이든 콘텐츠 ID 값 그리고이 경우 단순히 ap 태그입니다 내부에 비파괴적인 공간이 있습니다 이것이 다른 경우 거짓이 아니라는 의미는 그것이 찾고 있던 콘텐츠

우리는이 파일과이 파일을 포함시킬 것입니다 다음 봐 그리고이 contentincphp 파일 기본적으로 content_id PHP에있는 변수

두 개의 case 문과 첫 번째 문은 content01 값입니다 그것은 잠재력입니다 두 번째는 content02 값을 잠재력으로 사용하는 것입니다 그리고 나서 우리는 이것을 HTML로 봅니다 이전에 보았던 파일에 실제로 포함됩니다

그리고, 또는 content02가 값이면, 이것은 파일에 포함됩니다 그리고 우리는 여기에 우리가 기본을 가지고있는 사람이 없습니다 우리는 단지 단순히 뭔가를 포함해서 유효하지 않은 콘텐츠 ID 값을 전송합니다 우리는 단지 우리가 보내고 싶은 것을 선택하십시오 그리고 이것은 다시 ap 태그입니다

그 안에 끊기지 않는 공간 그래서이 파일이 첫 번째 파일에 포함되었다고 생각한다면 이 줄에 그래서 26 번 라인 실제로이 코드를 모두 포함하게 될 것입니다 그러나 실제로는 실제로는 사용에 불과합니다 이 아이템들 중 하나만 볼 수 있습니다

반환되었습니다 그리고 우리는 다시 이 파일을 보유하고 있으면 기본적으로 그 파일이 표시됩니다 바로 여기에 그것은 단지 간단합니다 PHP가 서버 프로그램과 동일한 결과를 얻었고 데이터가 어떻게 생성되는지 뒤로 그 기본적으로 간단한 설치 당신이 앉아서 연습하고 어떻게 볼 수 있는지 자신의 예제를 만들고 또한 생각해야합니다

콘텐츠를 구성하는 매우 단순한 방식이라는 점에서 그것을 돌려 보내 우리는 데이터베이스를 사용할 수 있으며 우리는 SQL 서버 콘텐츠 또는 콘텐츠를 검색하거나 모두 별도의 파일에있을 수 있습니다 다양한 방법이 있습니다 PHP는 여러분이 원하는 방식에 매우 유연합니다 처리해

그러나 경량 고속의 경우, 이것은 좋은 예일 수 있습니다 네가 가진 것이 많다면 생각하고 싶은 콘텐츠 이 줄 각각에 파일을 포함하여 실제로 콘텐츠를 여기에 포함하는 대신 그리고 너는 많이 얻을 수있어 콘텐츠가 너무 자주 변경되지 않고 마음에 들지 않으면 성능이 향상됩니다 콘텐츠 용 코드 파일을 업데이트합니다 좋아, 우리를 감쌌다

그래서 체크 이 파일을 볼 수있는 비디오 게시에 대한 설명 어디서 내 웹 사이트에 소스 코드 파일을 잡아 보고 주셔서 대단히 감사합니다