jQuery serialize() 이용해서 Form 데이터 ajax POST 전송하기

html의 폼 태그에 입력한 정보들을 POST 요청으로 전달하고 싶을 때가 있습니다.

 

serialize

jQuery serialize 메서드를 이용하면

폼 패너 내에 input, selelct, textarea의 value 값을 간단하게 표준 url 인코딩 형태 문자열로 만들 수가 있습니다.

<form>
    <label>
        <input type ="text" placeholder="아이디" name ="id">
    </label>
    <label>
        <input type ="password" placeholder="비밀번호">
    </label>
    <label>
        <input type ="text" placeholder="이름" name="username">
    </label>
    <label>
        <input type ="email" placeholder="이메일" name ="userEmail">
    </label>
    <button id="submitBtn">회원가입</button>
</form>

var formData = $('form').serialize()

// id=1&password=2&username=superman&userEmail=superman@naver.com

 

POST 전송

form Data를 jQuery ajax 옵션의 data 속성에 적용하면 POST로 데이터 전송이 가능합니다.

$(document).ready(function() {
    $("#submitBtn").click(function(e) {
        var formData = $("form").serialize();

        $.ajax({
            type: "POST",
            url: "https://dummyjson.com/products/add",
            data: formData,
            success: function(response) {
                console.log("success :", response);
            },
            error: function(error) {
                console.error("error :", error);
            }
        });
    });
});