JavaScript에서 POST 요청이 있는 양식 제출
JavaScript에서는 HTML 양식으로 POST 요청을 수행할 수 있습니다. 게시물은 HTML 양식에서 데이터를 제출하거나 서버에 보내는 데 사용되는 방법입니다.
JavaScript에서 POST 요청이 있는 양식 제출
아래 코드는 JavaScript를 사용하여 POST 요청에서 양식을 제출하는 방법을 보여줍니다. 여기에서 새 게시물 요청을 만들고 사용자를 새 URL myPath로 보냅니다.
먼저 경로(URL 또는 끝점), 매개변수(키-값 쌍이 있는 개체)를 인수로 사용하는 함수를 만들었습니다. 마지막은 함수 생성 시 직접 초기화하는 post 방식이다.
그런 다음 document.createElement() 메서드를 사용하여 양식 요소를 만들고 form 변수 안에 저장합니다. 그런 다음 이 form.method를 post 메소드로 초기화한 다음 form.action을 경로로 초기화합니다. 결국, 우리는 DOM 내부에 존재하는 body 태그에 우리가 만든 양식을 추가할 것입니다.
function sendData(path, parameters, method='post') {
const form = document.createElement('form');
form.method = method;
form.action = path;
document.body.appendChild(form);
for (const key in parameters) {
const formField = document.createElement('input');
formField.type = 'hidden';
formField.name = key;
formField.value = parameters[key];
form.appendChild(formField);
}
form.submit();
}
sendData('/myPath/', {query: 'hello world', num: '1'});
이 시점에서 우리는 폼을 생성하여 body 요소에 추가했으며 현재 폼은 내부에 어떤 요소도 포함하지 않습니다. 따라서 양식 내부에 데이터를 추가하려면 sendData() 함수에 전달하는 parameters 객체를 사용합니다. 이 객체를 반복하기 위해 for 루프를 사용하고 객체에서 각 키를 가져옵니다.
그런 다음 input 양식 필드를 만들고 formField 변수 안에 저장합니다. 이제 이 양식을 웹페이지 내부에 표시하고 싶지 않기 때문에 유형을 hidden으로 설정합니다. 마지막으로 parameters 개체의 키와 값을 사용하여 name 및 value 양식 필드를 초기화합니다.
우리의 경우에는 두 개의 키-값 쌍을 포함하는 객체를 전달하고 있습니다. 따라서 for 루프는 두 번 실행됩니다. 그런 다음 submit() 메소드를 사용하여 게시 요청을 수행하고 사용자를 다른 엔드포인트 또는 URL, 즉 myPath로 보냅니다. sendData() 함수는 sendData('/myPath/', {query: 'hello world', num: '1'}); 매개변수를 전달하여 호출됩니다.
위의 코드를 실행하면 아래와 같이 POST 요청을 한 다음 새 엔드포인트로 이동합니다.
이를 수행하는 다른 방법은 JavaScript 대신 HTML 자체 내부에 전체 양식을 만드는 것입니다. 그런 다음 다음과 같이 JavaScript 코드 내에서 이 양식과 해당 요소에 액세스합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form" action="https://www.wikipedia.org/" method="POST">
<input id="formField" type="hidden" name="Director" value="James Cameron">
</form>
<script src="./script.js"></script>
</body>
</html>
function postData(path, name, value){
document.getElementById("formField").name = name;
document.getElementById("formField").value = value;
document.getElementById("form").action = path;
document.getElementById("form").submit();
}
postData("https://www.wikipedia.org/","Writer","Jim Collins");
여기에서 method를 HTML 양식 자체에 POST로 직접 추가합니다. postData() 메소드 내에서 path, name 및 value를 postData("https://www.google.com/","Writer","Jim Collins")로 전달하고 있습니다. ;. 그런 다음 document.getElementById() 메서드를 사용하여 formField에 액세스한 다음 위와 같이 값을 적절하게 설정합니다. 이 코드를 실행한 후 POST 요청을 수행하고 아래와 같이 사용자를 Wikipedia 웹사이트로 안내합니다.
위의 코드는 이전 코드와 동일한 방식으로 작동하지만 훨씬 더 간결하고 읽기 쉽습니다.
