php 페이지가 업데이트 데이터를 새로 고치지 않습니다.
php 페이지가 새로 고쳐지지 않습니다. 새로 고치지 않음 데이터 업데이트는 구현이 매우 간단하며 프런트 엔드 Ajax 기술을 사용할 수 있습니다.
ajax 함수: Ajax 기술의 목적은 자바스크립트가 http 요청을 보내고, 백그라운드와 통신하고, 데이터와 정보를 얻을 수 있도록 하는 것입니다. 프런트엔드와 백엔드 분리를 달성합니다. Ajax 기술의 원리는 xmlhttp 객체를 인스턴스화하고 이 객체를 사용하여 배경과 통신하는 것입니다. Ajax 통신 프로세스는 후속 JavaScript 실행에 영향을 주지 않으므로 비동기 구현이 달성됩니다.
js에서 ajax가 해결하는 주요 문제는 현재 페이지를 새로 고치지 않고 특정 데이터를 서버에 전달하고 특정 데이터를 서버에서 클라이언트로 다시 가져오는 것입니다.
1. HTML의 5단계 전략:
1 AJAX 핵심 개체 만들기
ar xhr=new XMLHttpRequest();
2. 사전 로드 추가는 xhr 객체의 준비된 상태가 변경되면 함수를 트리거하는 것을 의미합니다.
xhr.addEventListener("load",loadHandler);
3. 연결 설정
xhr.open("GET","http://localhost/index.php?user=zhangsan");
연결 설정 시 매개변수 문제, 구문:
xhr.open("get", url, true);
비고: 공개 () method
첫 번째 매개변수는 요청 전송 방법을 나타내며 값은 get 또는 post입니다.
두 번째 매개변수는 요청한 URL 경로를 의미하며, 이는 귀하가 작성한 PHP 파일의 경로입니다. 다음은 운반된 get으로 얻을 수 있는 관련 정보입니다.
세 번째 매개변수는 요청이 비동기식인지 동기식인지를 나타냅니다. true라고 쓰면 비동기(기본값은 true), false라고 쓰면 동기를 의미합니다.
4. 서버에 대한 요청 시작
xhr.send();
구문:
xhr.send();
참고: 요청이 가져오기 모드로 전송되면 send() 명령에 작성해야 합니다.
매개변수로 전달된 데이터는 URL에 작성될 수 있으며, 서버는 이를 수신하기 위해 $_GET["매개변수 이름"]을 사용합니다.
요청이 포스트 모드로 전송되는 경우 데이터가 백엔드 페이지로 올바르게 전달되도록 요청 헤더를 설정해야 합니다. 여기서는 get 메소드를 사용하므로 매개변수를 작성할 필요가 없습니다.
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(“数据名1=数据值&数据名2=数据值”);
서버는 $_POST["매개변수 이름"]을 사용하여 수신합니다.
5. 사전 로드 기능을 선언하고 응답을 받습니다.
function loadHandler(){ // 获取并使用服务器的响应 console.log(xhr.response); }
2· PHP 파일에서
Three 단계 :
header("content-type:text/html;charset=utf-8");
문자 인코딩 설정
header("Access-Control-Allow-Origin:*");
Access-Control-Allow-Origin을 설정하여 도메인 간 액세스를 달성합니다(다른 도메인 이름은 서로 통신할 수 없기 때문입니다) 기본)
echo $_GET["user"]."今天心情很好";
프론트에 전달할 데이터
4. 액세스 구현:
작성된 PHP 파일을 phpStydy 폴더의 www 파일(아래 그림 참조):
1. phpStyle
2의 설치 디렉터리를 찾습니다. www 폴더#🎜 🎜#
3을 찾으세요. 방금 작성한 index.php 파일과 같이 www 폴더에 복사하세요. 🎜## 🎜🎜#4. 이제 간단한 Ajax 액세스를 구현합니다.
이제 HTML 코드를 실행합니다. #🎜 🎜#이 시점에서는 페이지가 새로 고쳐지지 않고 PHP 데이터에 액세스할 수 있습니다더 많은 PHP 관련 지식을 보려면
PHP中文网을 방문하세요. # 🎜🎜#!위 내용은 데이터 업데이트를 위해 PHP 페이지가 새로 고쳐지지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!