메뉴 건너뛰기

검색창 닫기

XEDITION

Web

Ajax form submit 사용법

proin 2021.01.20 14:56 조회 수 : 1

https://m.blog.naver.com/PostView.nhn?blogId=racoon_z&logNo=221080162986&proxyReferer=https:%2F%2Fwww.google.com%2F

그동안 Ajax 에 관련된 포스트를 몇번 쓴적이 있었는데..

 

생각해보니.. submit 형태로 넘기는 것을 자주 쓰면서 정리를 해본적이 없어서 적어볼까 한다.

 

결과나 샘플은 생략하고.. 코드만 간단하게 정리.

 

 

1. serialize 사용.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form id="form1" name="form1" method="post">
    
    // 생략
    
    <input type="button" value="확인" onclick="test1(); return false;">
</form>
 
<script>
    function test1(){
        var formData = $("#form1").serialize();
 
        $.ajax({
            cache : false,
            url : "${pageContext.request.contextPath}/testForm1", // 요기에
            type : 'POST', 
            data : formData, 
            success : function(data) {
                var jsonObj = JSON.parse(data);
            }, // success 
    
            error : function(xhr, status) {
                alert(xhr + " : " + status);
            }
        }); // $.ajax */
    }
</script>
 cs

- 위와 같이 작성하면, form(id=form1) 내에 입력된 값들을 testForm1 으로 보내준다.

  보통 회원가입, 로그인 등 무엇인가 형식에 맞게 입력해야 하는 부분에서 폼점검이 필요할때나

  비동기 식으로 무엇인가를 처리할때, 양이 너무 많아서 변수들 다 적기 귀찮을때 등에서 주로 사용을 하고 있다.

 

- 다만 input type 이 file 인 경우.. 문제가 좀 있던것으로 기억이 되는데..

  java 에서 파일을 받는 과정에서 MultiPart 를 사용할 때..

  RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

  이런 오류가 발생을 해버린다;;

  그래서 파일이 포함된 form을 다룰때는 아래와 같은 방식을 이용한다.

 

 

2. FormData() 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form id="form2" name="form2" method="post" enctype="multipart/form-data">
    <input type="file" id="files" name="files" multiple/>
    <input type="button" value="확인" onclick="test2(); return false;">
</form>
 
<script>
    function test2(){
        var form = $("form")[0];        
        var formData = new FormData(form);
 
        $.ajax({
            cache : false,
            url : "${pageContext.request.contextPath}/testForm2", // 요기에
            processData: false,
            contentType: false,
            type : 'POST', 
            data : formData, 
            success : function(data) {
                var jsonObj = JSON.parse(data);
            }, // success 
    
            error : function(xhr, status) {
                alert(xhr + " : " + status);
            }
        }); // $.ajax */    }
</script>
 cs

- 위와 같이 코드를 사용하면, 파일이 정상적으로 넘어 가는 것을 확인할 수 있다.

- 만약 form 이 두개라면, 첫번째 form이 $("form")[0], 두번째 form이 $("form")[1] 로 다루어진다.

- 이 코드는 파일뿐만 아니라 일반적인 input type 들도 잘 넘어간다.

 

 

3. 위의 두 방식중에 사용해야할 방식은..?

 어찌 보면.. 2번째 방식만 사용해도 될 듯 싶다. 파일도 잘넘기지, 일반 input type 들도 잘 넘기지..

 하지만 첫번째 방식을 아직도 사용하는 이유중 하나가 아마 브라우저 호환성 때문일듯 싶다.

 

 ※ FormData() 브라우저 호환표

 

 

 FormData 객체가 익스플로러10 부터 지원이다보니.. 대부분 익스플로러10 이상으로 넘어왔지만 아직도 9이하 버전을 사용하는 사람도 

 있을 것인데다가.. 기타 함수들도 아직 지원안하는 경우가 많은 것으로 보인다.

 어차피 브라우저들도 계속 업데이트 되다보면 언젠가는..다 지원을 해주겠지.. 언젠가는..

 

 

 

 

 

 

 

이 게시물을
목록
쓰기 태그
위로