[jQuery] ajax에서 data의 key값을 동적으로 주고 싶을 때

jQuery ajax에서 data의 key값을 동적으로 할당하고 싶을 경우 다음과 같이 작성할 수 있다.

 

function ajaxTest(){

    var testData = {};
    testData["key값"] = "value값";
    
    // key로 사용하고 싶은 값을 가져온다.
    var testkey = $('#testId').val();
    testData[testKey] = "value값";

    $.ajax({
        url : '경로',
        type : '방식',
        data : testData,
        success : function(res){
            if(res == "SUCCESS"){
                alert("성공!");
            }
        },
        err : function(err){
            alert(err.status + " : " + err.statusTest);
        },
        dataType : 'json'
    });
}

 

위에서와 같이 처음에는 var testData = {}; 로 비어있는 객체를 만들어준 다음

마치 배열에 값을 넣어주 듯 변수명[key값] = value값 의 형태로 프로퍼티를 설정할 수 있다.

 

문자열을 key와 value로 주고 싶을 경우 평소와 같이 따옴표로 묶어주면 된다.

다른 곳에서 동적으로 데이터를 가져와서 넣어줄 때는 변수로 받아서 넣어주면 된다.

 

또한 아래와 같이 좀 더 단순하게 할당하는 것도 가능하다.

동적 할당하고자하는 key를 대괄호로 묶어주면 된다.

var key = "testKey1";
var testData = { [key] : "value1", "testKey2" : "value2" };