서버와의 통신2

사용자 Data를 JSON형식으로 DB에 전달하기

reduce사용해서 전달하기

사용자가 입력한 값들을 받아서 JSON형식으로 (객체 형식)으로 만들어 DB에 전달하는 방법입니다.

<form action="/">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" value=""><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname" value=""><br><br>
    <input type="image" src="img_submit.gif" alt="Submit" class="submit" width="48" height="48">
</form>

<script>
$(function(){
    var valdateForm = function(e) {
        e.preventDefault();
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var alphabets = new Array(fname, lname);

        var counts = alphabets.reduce(function(acc, cur, idx){
            acc['value-'+idx] = cur;  // 내가 원하는 키의 명을 만들어서, 현재 값을 val 자리에 넣는것이다.
            return acc;
        }, {});  //{} 비어있는 객체의 초기값이다.
        
        $.ajax({
            method: "POST",
            url: "https://jsonplaceholder.typicode.com/posts",
            data: formdata,
            dataType: "json"
        })
        .done(function( rslt ) {
        			console.log( rslt );
        })
        .fail(function() {
        
        })
        .always(function() {
        
        });  
    };
    
    $('.submit').on('click', valdateForm); 
});
</script>

2KB

index.html