JQuery Ajax 로 form submit 하기 - form value 그대로 가져오기

요거 쉬운거 같은데, 예제들이 죄다 json으로 바꿔서 API 호출하는 형태로 되어 있는 것이 많네. 그냥 html 페이지에 있는 form submit을 jquery ajax 함수로 호출하는 방법을 정리해 두자.

 

이걸 한 이유는 submit 하고, 바로 그 정보를 이용해서 새창을 띄우도록 하려고 하니깐 ajax async false 로 동작 시켜야 했기 때문이다.

 

그냥 코드를 보자.

 

$("#sel2").click(function(e){

    e.preventDefault(); // avoid to execute the actual submit of the form.
    var button = $(this);
    var form = $("#mainform");
    var actionUrl = form.attr('action');
    $.ajax({
        type: "POST",
        url: actionUrl,
        data: form.serialize(), // serializes the form's elements.
        // 다른 페이지를 처리 후에 결과가 성공일 때 // 비동기식으로 처리를 함 
        async: false,
        // 출처: https://han288.tistory.com/71 [사이트 구축/최적화 활용 팁]                
        
        success: function(data)
        {
            console.log('Submission was successful.');
            console.log(data);
            alert(data); // show response from the php script.
            //출처: https://link2me.tistory.com/1048 [소소한 일상 및 업무TIP 다루기]
            cw=screen.availWidth;     //화면 넓이
            ch=screen.availHeight;    //화면 높이
            sw=cw/2;    //띄울 창의 넓이
            // sw=cw-200;    //띄울 창의 넓이
            sh=ch/2;    //띄울 창의 높이
            ml=(cw-sw)/2; //가운데 띄우기위한 창의 x위치
            mt=(ch-sh)/2; //가운데 띄우기위한 창의 y위치
            var url = button.data('to-url');
            // console.log($(this).data('to-url'));
            if(url != '0'){
                window.open(url, 'tst','width='+sw+',height='+sh+',top='+mt+',left='+ml+',resizable=yes,scrollbars=yes');
            }
        }
        error: function (data) {
            console.log('An error occurred.');
            console.log(data);
        },                
    });
    // $("#mainform").submit();

    return false;
});

"sel2" 라는 아이디를 가진 버튼을 누르면 해당 폼의 submit 을 ajax 함수로 호출하도록 한다.

 

여기서 보면 form.serialize() 함수를 이용하여 폼에 속한 input 값들을 가져오도록 한다는 게 내가 찾고 싶은 정보였음

 

암튼 성공하고 나면, 새창을 띄워주는 코드 까지 완료해두고 저장.

 

참고페이지 

https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form

jQuery AJAX submit form

오래되고 망가진 기술도 다시 보자

Lindeboom Jean-Bapt 님의 사진, 출처: Pexels