[JDBC] Ajax: 데이터 전송 (JSON)

🍁데이터 전송

---

일반적으로 데이터를 가져오기만 할 때는 GET, 데이터를 보내기도 할 때에는 POST를 사용한다.

success는 데이터를 수신하는 용도이기 때문에, 데이터를 보내기만 하고 가져오지 않을 때 return값이 없으므로 success가 필요 없다. 그래서 error만을 구현한다.

 

기본 코드

<h1>Ajax 데이터 보내는 방법</h1>

<form id="form1">
<table class="vertical">
	<tr>
		<th>이름</th>
		<td><input type="text" name="name" id="name" value="Isaac"></td>
	</tr>
	<tr>
		<th>나이</th>
		<td><input type="text" name="age" id="age" value="24"></td>
	</tr>
	<tr>
		<th>성별</th>
		<td>
			<input type="radio" name="gender" id="gender1" value="m" checked> 남자
			<input type="radio" name="gender" id="gender2" value="f"> 여자
		</td>
	</tr>
	<tr>
		<th>주소</th>
		<td><input type="text" name="address" id="address" value="서울시 강남구 역삼동"></td>
	</tr>
	<tr>
		<th>전화</th>
		<td><input type="text" name="tel" id="tel" value="010-1234-5678"></td>
	</tr>
</table>

<div>
	<input type="button" value="확인" id="btn">
</div>
</form>

 

단일 데이터 전송

data: 'name=' + $('#name').val()

data를 'key=value' 형태로 작성하여 단일 데이터를 전송할 수 있다.

위 코드는 name을 전송한다.

 

$('#btn').click(function() {

    //1. 단일 데이터 전송
    $.ajax({
        type: 'POST',
        url: '/ajax/ex05data.do',
        data: 'name=' + $('#name').val(),
        //success: function(result) {
            //데이터 수신
        //}
        error: function(a,b,c) {
            console.log(a,b,c);
        }
    });

});

package com.test.ajax.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex05data.do")
public class Ex05Data extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String name = req.getParameter("name");
		
		System.out.println("name: " + name);
	}

}

 

다중 데이터 전송

data: 'name=' + $('#name').val() + '&age=' + $('#age').val(),

여러 데이터를 하나의 문자열로 작성하여 수신할 수 있다.

 

$('#btn').click(function() {
			
    alert('name=' + $('#name').val() + '&age=' + $('#age').val());

    //2. 다중 데이터 전송
    $.ajax({
        type: 'POST',
        url: '/ajax/ex05data.do',
        data: 'name=' + $('#name').val() + '&age=' + $('#age').val(),
        //success: function(result) {
            //데이터 수신
        //}
        error: function(a,b,c) {
            console.log(a,b,c);
        }
    });

});

package com.test.ajax.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex05data.do")
public class Ex05Data extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		
		System.out.println("name: " + name);
		System.out.println("age: " + age);
	}

}

alert로 보내기 전에 데이터가 잘 들어갔는지 확인하는 게 좋다.

 

모든 데이터 전송

data: 'name=' + $('#name').val() + '&age=' + $('#age').val() + '&gender=' + $('#gender').val() + '&address=' + $('#address').val() + '&tel=' + $('#tel').val(),

다중 데이터를 전송하는 방식을 연이어 사용하여 모든 데이터를 전송할 수 있다.

 

$('#btn').click(function() {

    //3. 모든 데이터 전송
    $.ajax({
        type: 'POST',
        url: '/ajax/ex05data.do',
        data: 'name=' + $('#name').val() + '&age=' + $('#age').val() + '&gender=' + $('input[name=gender]:checked').val() + '&address=' + $('#address').val() + '&tel=' + $('#tel').val(),
        //success: function(result) {
            //데이터 수신
        //}
        error: function(a,b,c) {
            console.log(a,b,c);
        }
    });

});

package com.test.ajax.controller;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ex05data.do")
public class Ex05Data extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String gender = req.getParameter("gender");
		String address = req.getParameter("address");
		String tel = req.getParameter("tel");
		
		System.out.println("name: " + name);
		System.out.println("age: " + age);
		System.out.println("gender: " + gender);
		System.out.println("address: " + address);
		System.out.println("tel: " + tel);
	}

}

출력할 때 gender가 undefined로 나온다.

이 문제는 잘못 보내서 생긴 문제이므로 자바스크립트에서 해결해야 한다.

남자를 선택했는지, 여자를 선택했는지 알고 싶다면 gender라는 name이 선택한 value가 전송되도록 해야 한다.

 

checked

$('input[name=gender]').hide();
$('input[name=gender]:checked').val();

먼저 input type이 gender인 것을 찾는다. 그러면 남자와 여자 버튼 2개가 잡힌다.

그리고 이 뒤에 checked라는 filter를 붙이면 checked 된 것만 찾는다.

여기까지가 가장 기본적인 데이터를 전송하는 방식이다.

 

🍂객체로 데이터 전송

이번에는 key value 형태 말고 객체를 넣어보도록 하자.

원래 객체로 넘기는 방법은 없지만, 개발의 편의성을 위해 jQuery가 내부적으로 key value 형태로 바꿔주기 때문에 가능한 것이다.

원형은 key value 형태라는 점을 기억하도록 하자.

 

$('#btn').click(function() {
			
    //4. 객체로 데이터 전송
    $.ajax({
        type: 'POST',
        url: '/ajax/ex05data.do',
        data: {
            name: $('#name').val(),
            age: $('#age').val(),
            gender: $('#gender').val(),
            address: $('#address').val(),
            tel: $('#tel').val()
        },
        //success: function(result) {
            //데이터 수신
        //}
        error: function(a,b,c) {
            console.log(a,b,c);
        }
    });

});

 

🍂폼 태그를 활용하여 데이터 전송

이 방법은 모든 상황에서 사용할 수 있는 건 아니지만, 상황이 된다면 가장 편한 방법이다.

현재 폼 태그에는 메서드도 없고, action도 없다. 그리고 버튼도 submit 버튼이 아니다. 그럼에도 폼 태그를 만든 이유는 지금 사용하기 위해서이다. 이 방법은 폼 태그가 있어야 할 수 있는 방법이기 때문이다.

 

1. <form> 태그 사용
2. <input name="key">

폼 태그를 사용하는 것 외에도 name을 key로 사용하기 때문에 태그마다 name을 반드시 명시해 주어야 한다.

 

serialize 메서드

alert($('#form1').serialize());

jQuery로 폼 태그를 찾고, serialize 메서드를 호출한다.

 

name=Isaac&age=24&gender=m&address=%EC%84%9C%EC%9A%B8%EC%8B%9C+%EA%B0%95%EB%82%A8%EA%B5%AC+%EC%97%AD%EC%82%BC%EB%8F%99&tel=010-1234-5678

serialize 메서드는 쿼리 스트링을 출력한다.

 

$('#btn').click(function() {
	
	//5. 폼 태그를 활용하여 데이터 전송
	$.ajax({
		type: 'POST',
		url: '/ajax/ex05data.do',
		data: $('#form1').serialize(),
		error: function(a,b,c) {
			console.log(a,b,c);
		}
	});
	
});

이 방법은 코드가 간단하긴 하지만 폼 태그로 감싸고 name 태그를 작성해야 하기 때문에 객체를 활용하는 방법과 들어가는 비용이 비슷하다.