Language/Javascript

ajax를 이용한 async post data 저장

TechNote.kr 2015. 11. 16. 17:09
728x90


사용자가 grid(slickgrid) cell에 text 입력하면 해당 text가 서버의 database에 사용자 인지 없이 자동 저장되는 Logic 



  기본 구현 환경

  -. Slickgrid

  -. mysql

  -. django




Client



Slickgrid 설정


[templates/test/index.html]

    var columns = [

...

        {id: "comment", name: "Comment", field: "comment", width: 300, editor: Slick.Editors.Text},

    ];


    var options = {

        editable: true,

...

    };

Slickgrid column 설정 및 option에서 editable 속성을 enable하고 editor를 설정해 준다.



Ajax 설정


[templates/test/index.html]

        grid.onCellChange.subscribe(function(e, args) {

            $.ajax({

                type: "POST",

                url: "/test/updateComment/",

                data: {

                    code: data[args.row]['code'],

                    comment: data[args.row][grid.getColumns()[args.cell].field],

                    csrfmiddlewaretoken: '{{ csrf_token }}'

                },

                dataType: "json",

                success: function(a) {

                    //console.log(data);

                }

            });

        });

해당 부분의 사용법[참고링크] 외에 주의깊게 봐야할 부분은 POST 방식으로 넘기게 되는 json data 이다.

slickgrid에서 원하는 data를 가져 와야하는데 cell change가 발생한 cell의 정보는 args로 부터 추출할 수 있다.


args.row : cell change가 발생한 row index (index는 0부터 시작)

args.cell : cell change가 발생한 column index (index는 0부터 시작)

grid.getColumns()[args.cell] : cell change가 발생한 column 열에 대한 information

grid.getColumns()[args.cell].field : cell change가 발생한 column 열의 field 이름 (여기에서는 "comment")


결론적으로 cell change가 발생한 cell의 text값을 가져오려면 다음 배열 접근이 필요하다.

data[args.row][grid.getColumns()[args.cell].field]


cell change가 발생하면 해당 값을 즉시 설정한 url로 POST방식으로 전송한다.


 단, 주의해야 할 것이 그냥 data만 전송할 경우 http 403 forbidden이 response로 돌아올 수 있다.

 따라서 json data전달시 crsf_token 추가가 필요하다. 



Server



django views.py 설정

def updateComment(request):

    privateCommentData.objects.update_or_create(code=request.POST['code'],defaults={'comment':request.POST['comment']})

    return HttpResponse(status=200)

입력하려는 data가 기 mysql에 존재하면 update를 하고, 없을 경우 insert를 실행한다.

django에서는 해당 동작을 update_or_create라는 api로 구현해 놓았다. [참고자료]


update_or_create(defaults=None**kwargs)
New in Django 1.7.

A convenience method for updating an object with the given kwargs, creating a new one if necessary. The defaults is a dictionary of (field, value) pairs used to update the object.

Returns a tuple of (object, created), where object is the created or updated object and created is a boolean specifying whether a new object was created.

The update_or_create method tries to fetch an object from database based on the given kwargs. If a match is found, it updates the fields passed in the defaults dictionary. 


위의 update_or_create를 거치게 되면 아래와 같이 mysql에 sync되게 된다.



728x90

'Language > Javascript' 카테고리의 다른 글

[Javascript] var, let, const 비교 분석  (0) 2022.07.03
[Javascript] 코드 동작 확인 방법  (0) 2022.06.20
javascript is eating the world.  (0) 2015.12.23
ajax POST debugging 방법  (0) 2015.12.12
Slickgrid grid options  (0) 2015.11.16
Slickgrid example1-simple.html 분석  (0) 2015.11.16
ajax  (0) 2015.11.02
Closure - 클로저  (0) 2015.10.25