728x90
안녕하세요 이번 시간에는 자바스크립트 코드를 활용해서 get/post 방식으로 데이터를 보내는 방법을 알아보려 합니다. 보통은 아래와 같이 html 안에서 form 태그 안에 input 태그를 넣어서 전송하는 방법이 주로 쓰이는데요.
<h1>회원가입</h1>
<form action="http://localhost:3000/" method="GET">
<label for="id">아이디:</label>
<input type="text" id="id" name="id"><br><br>
<label for="pw">비밀번호:</label>
<input type="text" id="pw" name="pw"><br><br>
<input type="submit" value="Submit">
</form>
같은 방식을 자바스크립트 코드를 통해서도 전송할 수 있습니다. 이렇게 구현할 경우 데이터를 보내는 기능을 함수화하여 재사용성을 높일 수도 있고, 클릭한 ui에 따라 데이터를 다르게 전송할 수도 있습니다.
특히 서버에서 받아온 데이터를 활용하여 자바스크립트로 동적인 ui를 표시하고, 이 각각의 ui를 클릭하거나 할 때 별개의 get/post 이벤트를 넣고 싶은 경우 유용하게 활용될 수 있습니다.
예를 들어 서버에서 아래와 같은 데이터를 받아서 자바스크립트로 ui를 렌더링했다고 가정합니다.
const json_data = ["1번 전송", "2번 전송", "3번 전송", "4번 전송", "5번 전송"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
</head>
<body>
<div id = "root"></div>
<script>
// 받아온 데이터
const json_data = ["1번 전송", "2번 전송", "3번 전송", "4번 전송", "5번 전송"]
// ui 렌더링할 div 태그에 변수 할당
const div = document.getElementById("root");
// 데이터 개수만큼 렌더링
for (const block of json_data) {
// 렌더링할 div 태그 생성
const content = document.createElement('div')
// div 태그 안에 데이터 이름, 전송버튼 추가
content.innerHTML = `<div>
<span>${block}</span>
<button>전송하기</button>
</div>`
div.append(content)
}
</script>
</body>
</html>
만약 전송하기 버튼을 눌렀을 때 특정 경로로 get/post 요청을 보내고 각 행의 텍스트를 보내게 하고 싶으면 (ex : 첫번째 전송하기 버튼을 클릭할 때는 1번 전송 텍스트가 보내지고 두번째 전송하기 버튼을 클릭할 때는 2번 전송 텍스트를 보내고 싶을 경우) 아래와 같이 별도의 함수로 get/post 요청을 보내는 로직을 만든 뒤, 전송하기 버튼의 클릭 이벤트 발생 시 해당 함수가 실행되게 할 수 있습니다.
우선 자바스크립트로 get/post 요청을 보내는 sendData 함수를 만들어줍니다.
// 자바스크립트로 데이터 전송하는 함수
function sendData(data, data2, url) {
const form = document.createElement('form'); // form 태그 생성
form.setAttribute('method', 'get'); // 전송 방식 결정 (get or post)
form.setAttribute('action', url); // 전송할 url 지정
const data_1 = document.createElement('input'); // input 태그 생성
data_1.setAttribute('type', 'hidden'); // type = hidden
data_1.setAttribute('name', 'data1'); // 데이터의 key
data_1.setAttribute('value', data1); // 데이터의 value (여기서는 data1)
// 여러 개의 데이터를 보낼 경우 위와 같은 코드 반복
const data_2 = document.createElement('input');
data_2.setAttribute('type', 'hidden');
data_2.setAttribute('name', 'data2');
data_2.setAttribute('value', data2);
// form 태그에 input 태그 넣고 summit 가능하게 처리
form.appendChild(data_1);
form.appendChild(data_2);
document.body.appendChild(form);
form.submit();
}위 코드에서는 자바스크립트를 통해 동적으로 form 태그를 생성한 뒤 전송방식, 전송할 경로를 지정합니다.
그 후 input 태그를 생성하여 type : hidden으로 안보이게 처리한 뒤 요청을 보낼 key와 value값을 설정해 줍니다.
마지막으로 form 태그 아래에 input 태그를 넣어줍니다.
다음으로는 각 전송하기 버튼을 클릭했을 때 이 함수가 작동하도록 렌더링 되는 부분을 다음과 같이 수정 해줍니다.
for (const block of json_data) {
// 렌더링할 div 태그 생성
const content = document.createElement('div')
// div 태그 안에 데이터 이름, 전송버튼 추가
// span와 button의 id에 json의 key값 부여
content.innerHTML = `<div>
<span id = "text_${Object.keys(block)}" >${Object.values(block)}</span>
<button id = "${Object.keys(block)}" class = "send_btn">전송하기</button>
</div>`
div.append(content)
}
// 버튼에 대한 클릭 리스너
for (const btn of document.querySelectorAll('.send_btn')) {
btn.addEventListener('click', (e) => {
// 클릭한 버튼의 id
const btn_id = e.target.id;
// 같은 행의 텍스트 (span 태그)
const text = document.getElementById("text_"+btn_id);
// 클릭한 버튼의 텍스트와 "전송 버튼 클릭"이라는 문자열을 get.php 파일로 전송
sendData(text.innerHTML, "전송 버튼 클릭", "./get.php");
})
}먼저 렌더링 된 ui에 고유값을 부여하기 위해 span태그와 button 태그에 json의 key값을 부여합니다.
그리고 전송하기 버튼을 클릭했을 때 그 id를 활용하여 해당 전송하기 버튼과 일치하는 행의 텍스트를 찾아낸 뒤 sendData 함수를 통해 get.php로 get/post 요청을 실행합니다.
get.php
전송하기 버튼을 클릭했을 때 전송한 데이터를 확인할 수 있습니다.
<?php echo $_GET['data1']; ?>
<?php echo "\n"; ?>
<?php echo $_GET['data2']; ?>
결과 영상입니다. 클릭한 버튼에 따라 데이터가 다르게 전송되는 걸 확인할 수 있습니다.
전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
</head>
<body>
<div id = "root"></div>
<script>
// 받아온 데이터
const json_data = [{1 : "1번 전송"}, {2 : "2번 전송"}, {3 : "3번 전송"}, {4 : "4번 전송"}, {5 : "5번 전송"}]
// ui 렌더링할 div 태그에 변수 할당
const div = document.getElementById("root");
// 데이터 개수만큼 렌더링
for (const block of json_data) {
// 렌더링할 div 태그 생성
const content = document.createElement('div')
// div 태그 안에 데이터 이름, 전송버튼 추가
// span와 button의 id에 json의 key값 부여
content.innerHTML = `<div>
<span id = "text_${Object.keys(block)}" >${Object.values(block)}</span>
<button id = "${Object.keys(block)}" class = "send_btn">전송하기</button>
</div>`
div.append(content)
}
// 버튼에 대한 클릭 리스너
for (const btn of document.querySelectorAll('.send_btn')) {
btn.addEventListener('click', (e) => {
// 클릭한 버튼의 id
const btn_id = e.target.id;
// 같은 행의 텍스트 (span 태그)
const text = document.getElementById("text_"+btn_id);
// 클릭한 버튼의 텍스트와 "전송 버튼 클릭"이라는 문자열을 get.php 파일로 전송
sendData(text.innerHTML, "전송 버튼 클릭", "./get.php");
})
}
// 자바스크립트로 데이터 전송하는 함수
function sendData(data1, data2, url) {
const form = document.createElement('form'); // form 태그 생성
form.setAttribute('method', 'get'); // 전송 방식 결정 (get or post)
form.setAttribute('action', url); // 전송할 url 지정
const data_1 = document.createElement('input'); // input 태그 생성
data_1.setAttribute('type', 'hidden'); // type = hidden
data_1.setAttribute('name', 'data1'); // 데이터의 key
data_1.setAttribute('value', data1); // 데이터의 value (여기서는 data1)
// 여러 개의 데이터를 보낼 경우 위와 같은 코드 반복
const data_2 = document.createElement('input');
data_2.setAttribute('type', 'hidden');
data_2.setAttribute('name', 'data2');
data_2.setAttribute('value', data2);
// form 태그에 input 태그 넣고 summit 가능하게 처리
form.appendChild(data_1);
form.appendChild(data_2);
document.body.appendChild(form);
form.submit();
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [Javascript] BroadcastChannel 를 사용해서 탭 간 메세지 주고받기 (0) | 2023.06.07 |
|---|---|
| [Javascript] 내 음성을 raw pcm data format 음원에 저장하기. (0) | 2023.05.26 |
| [JavaScript] 정규식을 활용하여 이메일 로그인 시 예외처리하기 (0) | 2023.05.08 |
| [JavaScript] 내 화면 녹화 및 다운로드하기 (0) | 2023.05.04 |
| [javascript] Table의 Row요소 drag&drop (0) | 2023.04.25 |