[Ajax] Ajax를 통한 색인, 연관 배열 전송 방법

jQuery Ajax를 통해 POST 타입으로 연관 배열의 값을 전송하는중

값이 제대로 전달되지 않는 에러가 발생하였다.

원인은 자바스크립트의 배열 선언에서 문제가 있었다.

자바스크립트에서 배열 선언 방식은 아래와 같이 나뉘는데.

	설명	텍스트	기호
색인 배열	첨자를 이용하여 접근하는 것	new Array();	[ ];
연관 배열	자바의 맵 처럼 KEY에 대한 값을 저장하는 구조	new Object();	{ };

필자는 계속해서 첫번째 색인 배열의 방식으로

연관배열을 사용 하고 있었던 것이다.

■ jQuery Ajax를 통한 색인 배열의 전송

01. 가장먼저 기본적인 색인 배열로 선언한 값을 Ajax로 전송하는 예제이다.

get_array_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Ajax를 통한 연관배열 전송</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function arrayAjaxParsing() {

        var arrAjax = new Array();

        arrAjax[0] = "첫번째";
        arrAjax[1] = "두번째";
        arrAjax[2] = "세번째";

        jQuery.ajax({
            url : "./set_array_ajax.php"
            , type : "POST"
            , data : { postData:arrAjax }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    alert(obj.message);
                } else {
                    alert(obj.message);
                }
            }
        });
    }
</script>
<body>
<input type="button" onClick="arrayAjaxParsing();" value="전송"/>
</body>
</html>

02. 전송된 값을 보여줄 페이지

set_array_ajax.php

<?php
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
?>

03. 위 코드를 웹 브라우저의 개발자 도구를 통해서 보면 아래와 같은 결과를 확인 할 수 있다.

① 파이어 버그같은 개발자 도구 프로그램을 실행한다.

② 전송된 값이 표현될 부분을 오픈해 둔다.

③ 전송 버튼을 클릭한다.

그럼 위와 같은 결과가 나오는 것을 확인 할 수 있다.

■ jQuery Ajax를 통한 연관 배열의 전송 - 실패 사례

01. 그럼 이제 위 코드를 연관배열로 바꾸어 보자. 아래 예제는 위와 동일한 소스에서 색인배열만 연관배열로 바꾸었다.

get_array_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Ajax를 통한 연관배열 전송</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function arrayAjaxParsing() {

        var arrAjax = new Array();

        arrAjax['one'] = "첫번째";
        arrAjax['two'] = "두번째";
        arrAjax['three'] = "세번째";

        jQuery.ajax({
            url : "./set_array_ajax.php"
            , type : "POST"
            , data : { postData:arrAjax }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    alert(obj.message);
                } else {
                    alert(obj.message);
                }
            }
        });
    }
</script>
<body>
<input type="button" onClick="arrayAjaxParsing();" value="전송"/>
</body>
</html>

02. 출력결과는 아래와 같다. 그렇지만 이번에는 개발자 도구에 넘어온 값이 없는 모습을 확인 할 수 있다.

03. 무언가 잘못된건지 값을 넘기기전 경고창을 띄워보면 분명 값이 잘 나타나는 것을 볼 수 있다.

※ 필자는 그동안 색인 배열을 통해서도 연관배열을 진행중인 코드내에서 크게 무리없이 사용하였기에.

계속 이런식으로 사용하고 있었고.

경고창에 값또한 정상적으로 띄어졌기에 이 문제를 해결하는데 상당히 삽질을 많이 해야 했기에.

이번에 확실히 정리하고 가려고 이렇게 포스팅 하게 되었다.

■ jQuery Ajax를 통한 연관 배열의 전송 - 성공 사례

01. 위와 같이 진행했던 예제에서 new Array()를 new Object()로 수정하고 다시 실행해 보자.

get_array_ajax.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jQuery Ajax를 통한 연관배열 전송</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    function arrayAjaxParsing() {

        var arrAjax = new Object();

        arrAjax['one'] = "첫번째";
        arrAjax['two'] = "두번째";
        arrAjax['three'] = "세번째";

        jQuery.ajax({
            url : "./set_array_ajax.php"
            , type : "POST"
            , data : { postData:arrAjax }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    alert(obj.message);
                } else {
                    alert(obj.message);
                }
            }
        });
    }
</script>
<body>
<input type="button" onClick="arrayAjaxParsing();" value="전송"/>
</body>
</html>

02. 그럼 이번에는 전송된 set_array_ajax.php 에서도 전송된 값이 잘 넘어오는 모습을 확인 할 수 있다.

■ 설명

자바스크립트에서는 배열 인덱스가 키워드를 나타내는 문자열이고, 이 문자열에 주어진 값을 매핑하는 연관 배열을 만들 수 있다. 해결에서 배열 인덱스는 주어진 배열 원소의 식별자이고, 배열의 실제 값은 폼 요소의 값이다.

연관 배열을 만들 수 있지만 이를 위해 Array 객체를 사용하지는 않는다. Array 객체를 사용하는것은 위험하고 사실상 추천하지 않는다. Array.prototype을 통해 Array 객체의 기능을 확장하면 Array 객체를 사용해서 작성된 연관 배열을 for in 반복문에서 사용할 때 문제가 발생한다.

for in 반복문은 String 객체의 속성이나 개발자가 직접 작성한 객체의 속성과 같은 어떤 객체의 속성에 대해 반복하는 것이다.

Array 객체를 연관 배열로 만들어 사용할 때 실제로 원한느 것은 배열 원소를 추가하는 것이 아니라 배열 객체에 속성을 추가하는 것이다. Array 뿐만 아니라 RegExp 또는 String으로도 연관 배열을 만들 수 있다. 자바스크립트에서 이런 일이 가능한 이유는 객체가 연관배열로 되어 있기 떄문이다.

배열에 새 값을 추가할 때

obj[propName] = "somevalue";

이때 실제로는 객체에 새로운 속성이 추가된 것이다.

obj.propName = "somevalue";

연관 배열이 숫자 기반 배열과 어떻게 다른지 더 알아보자. Array를 사용해서 연관 배열을 작성하면 인덱스 배열의 '원소'에 접근할 수 없고 length 속성은 0을 반환한다.

Array 대신 자바습크립트의 Object를 직접 사용해서 연관 배열을 작성하면 똑같은 기능을 하면서도 prototype을 사용해서 Array 객체를 확장한 라이브러리와의 충돌을 피할 수 있다.

저작자표시

'jQuery > AJAX' 카테고리의 다른 글

[AJAX] input type="file" 없이 파일 전송하기 (0)	2018.02.05
[AJAX] AJAX를 사용하여 파일 업로드 하기 (2)	2018.02.02

사악미소의 현대마법의 공방

[Ajax] Ajax를 통한 색인, 연관 배열 전송 방법

'jQuery > AJAX' 카테고리의 다른 글

티스토리툴바

[Ajax] Ajax를 통한 색인, 연관 배열 전송 방법

'jQuery > AJAX' 카테고리의 다른 글

'jQuery/AJAX' Related Articles

티스토리툴바