[java] form 폼 데이터 ajax를 통해 서버로 넘기기

html

<form id="testform" name="testform" method="post" action="/param">
    <input type="text" name="t"> 
    <input type="text" name="t2"> 
</form>
<button type="submit" class="btn_submit back-color2 btn btn-secondary" form="testform">Test</button>

 

js

$("form#testform").submit(function (e) {
    e.preventDefault();
    var queryString = $("form[name=testform]").serialize(); // 데이터 직렬화 

    $.ajax({
        url: "../param",
        type: 'POST',
        data: queryString,
        success: function (data) {
            alert(data);
        },
        error: function (e) {
            alert("실패했습니다.");
        },
    });
});

데이터 직렬화를 하게되면 

t1=abc&t2=qwe 이런식으로 넘어가게됨.

 

controller (java)

@PostMapping("/param")
public ResponseEntity<?> paramtest(@RequestParam("t") String val1, @RequestParam("t2") String val2) {
    return ResponseEntity.ok("Success!\n" + val1 + " and " + val2); 
}

 

입력

 

결과