자바스크립트로 게시물 제출 작성 방법
- PHPz원래의
- 2023-05-09 17:29:373481검색
프런트 엔드 개발에서는 POST 요청을 포함한 HTTP 요청을 보내기 위해 AJAX 기술을 사용해야 하는 경우가 많습니다. 이 문서에서는 JavaScript로 POST 요청을 작성하는 방법을 설명합니다.
1. POST 요청의 기본 개념
우선 POST 요청의 기본 개념을 이해해야 합니다.
HTTP 프로토콜에서 GET과 POST는 모두 일반적으로 사용되는 요청 방법입니다. 주요 차이점은 다음과 같습니다.
- GET 요청은 매개변수를 URL에 직접 넣고 전달하는 반면, POST 요청은 매개변수를 요청 본문에 넣습니다. .
- GET 요청은 일반적으로 1KB 이하의 적은 양의 데이터를 전송하는 반면, POST 요청은 제한이 없으며 대량의 데이터를 전송할 수 있습니다.
- GET 요청은 URL의 매개변수를 사용자가 보거나 수정할 수 있기 때문에 안전하지 않은 반면, POST 요청은 매개변수가 요청 본문에 배치되므로 상대적으로 안전합니다.
위는 POST 요청의 기본 개념입니다. 다음으로 JavaScript로 POST 요청을 작성하는 방법을 소개하겠습니다.
2. XMLHttpRequest 개체를 사용하여 POST 요청 보내기
JavaScript에서는 XMLHttpRequest 개체를 사용하여 GET 및 POST 요청을 포함한 HTTP 요청을 보낼 수 있습니다.
XMLHttpRequest 객체는 백그라운드에서 서버와 데이터를 교환하는 데 사용할 수 있는 JavaScript API입니다. AJAX 기술을 통해 데이터를 비동기적으로 로드할 수 있으며 전체 페이지를 다시 로드하지 않고도 페이지를 업데이트할 수 있습니다.
다음은 XMLHttpRequest 개체를 사용하여 POST 요청을 보내는 기본 단계입니다.
- XMLHttpRequest 개체 만들기
먼저 XMLHttpRequest 개체를 만들어야 합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.
var xhr = new XMLHttpRequest();
- 요청의 경로와 매개변수 설정
다음으로 요청의 경로와 매개변수를 설정해야 합니다. 이러한 매개변수는 요청 본문에 배치됩니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.
xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=John&age=25');위 코드에서 요청 경로를 http://example.com/api로 설정하고 매개변수는 name=John 및 age=25입니다.
또한 요청 헤더 Content-type도 application/x-www-form-urlencoded로 설정됩니다. 이는 요청 본문의 매개변수가 키-값 형식임을 서버에 알려주는 표준 POST 요청 헤더입니다.
- 서버가 반환한 데이터 받기
마지막으로 서버가 반환한 데이터를 받아야 합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.
xhr.onreadystatechange = function() {
if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
console.log(xhr.responseText);
}
}위 코드에서는 XMLHttpRequest의 onreadystatechange 이벤트 핸들러를 설정했습니다. ReadyState가 4(즉, 요청 완료)가 되고 상태 코드가 200이면 서버가 성공적으로 응답하고 데이터를 반환했음을 의미합니다. 이때 서버에서 반환하는 데이터는 xhr.responseText를 통해 얻을 수 있다.
3. fetch API를 사용하여 POST 요청 보내기
XMLHttpRequest 객체 외에도 fetch API를 사용하여 POST 요청을 보낼 수도 있습니다. fetch API는 클라이언트와 서버 간에 HTTP 요청을 보내고 Promise 객체를 사용하여 서버 응답을 캡슐화하기 위한 표준 JavaScript API입니다.
다음은 가져오기 API를 사용하여 POST 요청을 보내는 기본 단계입니다.
- 요청의 경로와 매개변수 설정
먼저 요청의 경로와 매개변수를 설정해야 합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.
fetch('http://example.com/api', {
method: 'POST',
headers: {
'Content-type': 'application/x-www-form-urlencoded'
},
body: 'name=John&age=25'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));위 코드에서 요청 경로를 http://example.com/api로 설정하고 매개변수는 name=John 및 age=25입니다.
또한 요청 헤더 Content-type도 application/x-www-form-urlencoded로 설정됩니다. 이는 요청 본문의 매개변수가 키-값 형식임을 서버에 알려주는 표준 POST 요청 헤더입니다.
- 서버가 반환한 데이터 받기
마지막으로 서버가 반환한 데이터를 받아야 합니다. fetch API의 Promise 객체를 사용하여 이를 처리할 수 있습니다. 이는 다음 코드를 사용하여 달성할 수 있습니다.
.then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
위 코드에서는 response.json() 메서드를 사용하여 응답 본문을 JSON 형식으로 변환하고 then() 메서드를 통해 응답 데이터를 처리하고 다음을 통해 예외를 처리합니다. catch() 메소드.
4. 요약
이 기사에서 소개한 방법을 통해 XMLHttpRequest 개체 및 가져오기 API 사용을 포함하여 JavaScript로 POST 요청을 작성할 수 있습니다. 이러한 메서드는 데이터를 비동기적으로 로드하고 전체 페이지를 다시 로드하지 않고도 페이지를 업데이트할 수 있습니다. 실제 필요에 따라 적절한 방법을 선택하여 POST 요청을 보낼 수 있습니다.
위 내용은 자바스크립트로 게시물 제출 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!