ajax로 JSON 객체 배열 넘기기 (파이썬 장고)

아래는 JSON 객체 구조의 배열이다.

 

JSON 구조는

아래와 같은 특징이 있다.

이름과 값의 쌍으로 이루어짐

 

예를 들어 아래와 같은 것이다.

 

이름: 홍길동

나이: 20

성별: 남자

 

파이썬의 Dictionary와도 비슷한데 차이점은 JSON 같은 경우 데이터를 담아서 전달하는데 그치지만

Dictionary는 실제로 메모리에 저장되는 객체이다. 

 

아무튼 비즈니스에서는 종종 아래와 같이 JSON 구조의 객체배열을 넘겨줄 때가 있는데 

    let objArr = [
    	{
        sno: '1',
        paramCode: '0101',
        dateTime: '2023-12-07 11:46:57.000000'
        },
        {
        sno: '2',
        paramCode: '0102',
        dateTime: '2023-12-07 11:47:00.000000'
        },
    ]

 

데이터를 쏴주는 ajax 측과 받는 파이썬 장고의 측 각각의 방법을 아래에서 소개하려고 한다.

 

먼저 경로는 변경될 수 있으므로 ajax 밖의 변수로 선언해놓았으며

data의 경우 JSON.stringify()를 거쳐서 ajax에 싣는다.

이는 javascript 데이터를 JSON String 형식으로 감싸주는 것으로

위에 sno, paramCode, dateTime 같은 이름(Key)을 String으로, 즉, 쌍따옴표로 감싸주는 것으로 보면 된다.

 

{"sno":"1", "paramCode":"0101",...}

 

        let svcUrl = '/경로'
        $.ajax({
            data : { 'objArr' : JSON.stringify(objArr) } ,
            dataType: 'json',
            url: svcUrl,
            type: 'POST',
            success: function (dataDict) {
                if (dataDict.result === 'succeeded') {
							(1)
                }
                else{
							(2)
                }
            }
        }).done(function () {
                			(3)
        });

 

(1) 

dataDict.result가 'succeeded' 인 경우 실행하는 코드로
파이썬 장고에서 원하는 작업이 제대로 실행됐다면
dictionary에 임의의 성공 값인 'succeeded'를 return 할 수 있고
이 값을 받으면 ajax 측에서 로직이 제대로 돌았다는 것으로 간주하고 추가 작업을 진행할 수 있다.

 

(2)

만약 ajax 통신은 제대로 이루어졌지만 파이썬 장고에서 제대로 실행되지 않아
임의의 성공 값인 'succeeded'를 return 받지 못했다면 실행하는 코드영역이다.

 

(3)

만약 ajax 통신은 제대로 이루어졌지만 파이썬 장고에서 제대로 실행되지 않아
임의의 성공 값인 'succeeded'를 return 받지 못했다면 실행하는 코드영역이다.

 

---

아래는 파이썬 장고 소스로 위 ajax에서 지정한 경로가 urls.py에 제대로 선언되어있고 그 경로가 아래 경로를 찾는다면 아래 함수가 실행될 것이다.

 

먼저 JSON 구조의 객체배열이기 때문에 아래와 같이 json.loads로 꺼냈으며 배열이기 때문에 반복문을 통해

변수에 담아주었다.

 

변수에 담은 이 값을 통해 장고 프레임워크로 DB 테이블을 모델링한 model.py에 접근하여 DB에 접근할 수 있다.

CRUD가 되었든 단순 비교가 되었든 원하는 작업을 진행한 후 Return을 JsonResponse로 할 것인데

data_dict라는 임의의 dictionary 타입의 변수에 key 값으로 result를, item 값으로 'succeeded' 혹은 'failed'로 줄 수 있다.

def 함수명(request):

    param = json.loads(request.POST.get('objArr'))
    try:
        for item in param:
            sno = xssescape(item['sno'])
            param_code = xssescape(item['paramCode'])
            date_time = xssescape(item['dateTime'])

			...장고 소스...


        if 조건문:
            data_dict = {'result': 'succeeded'}
        else:
            data_dict = {'result': 'failed'}

    except Exception as err:
        handle = exception_handler.ExceptionHandle(err)
        return handle.get_response()

    return JsonResponse(data_dict, safe=False)

 

---

이제 다시 ajax로 돌아와서 아래 코드를 본다면 이해가 쉬울 것이다.

        let svcUrl = '/경로'
        $.ajax({
            data : { 'objArr' : JSON.stringify(objArr) } ,
            dataType: 'json',
            url: svcUrl,
            type: 'POST',
            success: function (dataDict) {
                if (dataDict.result === 'succeeded') {
							(1)
                }
                else{
							(2)
                }
            }
        }).done(function () {
                			(3)
        });