[바미] Ajax data 주의 사항.

Ajax에서 data로 보낸 뒤, Node SQL에서 파라미터로 받는 식의 형태로 작업하고 있던 중에 있었던 일입니다.

 

result [Object: null prototype] {
  objA: 'data',
  objB: 'data',
  objC: 'data',
  objD: 'data',
  objE: 'data',
  objF: 'data'
}

이런식으로 body를 보냈는데 

 

objC값을 단일 값이 아닌 다중 값으로 변경되어 array로 보내주어야 했습니다.

 

objC값을 받아오는 부분이 아래와 같은데

<div class="filter_list" id="filter">
    <div class="filter_item on" name ="">
        <p class="filter_name">All</p>
    </div>
    <div class="filter_item" name="AA">
        <p class="filter_name" >A</p>
    </div>
    <div class="filter_item" name="BB">
        <p class="filter_name">B</p>
    </div>
</div>

 

 

해당 부분 중 선택된 부분을 가져오기 위해

// name이 같은 div 값들을 배열에 담는다.
var checkboxNames = new Array();
$('.filter_item.on').each(function (idx) {
    checkboxNames.push($(this).attr('name'));
});

위와 같은 코드를 작성하였습니다.

div가 선택 될 때 on이 되는 성질을 이용하여 name값을 checkboxNames라는 배열에 push 하도록 하였지요.

 

그 후 objC값을 checkboxNames에서 받아오도록 ajax data 받아오는 부분을 수정 한 뒤, 아래와 같은 값이 나올 줄 알았습니다.

result [Object: null prototype] {
  objA: 'data',
  objB: 'data',
  objC: '['aa','bb','cc']',
  objD: 'data',
  objE: 'data',
  objF: 'data'
}

그런데 현실은 아래와 같이 바뀌더군요..

result [Object: null prototype] {
  objA: 'data',
  objB: 'data',
  'objC[]': '['aa','bb','cc']',
  objD: 'data',
  objE: 'data',
  objF: 'data'
}

Node에선 이 데이터들을 파라미터.objA, 파라미터.objB 등으로 써야 했는데 key값이 obj형태가 아니게 되어 그럴 수도 없게 되었습니다.

 

물론 파라미터['objc[]']해서 받아올 수 있었지만 값이 없을 때 처리도 해주어야했고, SQL IN문에 넣어야 했기 때문에 따로 string처리도 해주어야 해서 SQL만 동작하는 코드가 더러워지더라구요.

 

그래서 ajax에서 받아오는 부분에서 string 처리를 하여 

result [Object: null prototype] {
  objA: 'data',
  objB: 'data',
  objC: 'data',
  objD: 'data',
  objE: 'data',
  objF: 'data'
}

이러한 형태로 받아지도록 만들었지만 어떤 이유로 key값의 이름과 타입이 바뀌는 건지는 알아내지 못했어요.

 

혹여나 Ajax 쓰실 때 저와 같은 일을 겪으신 분들은 해당 key가 받는 값을 string형태로 처리하여 보내시면 해결됩니다.