전단 에서 백 엔 드 로 json 데 이 터 를 전달 합 니 다.

  • 최근 에 ajax 를 사용 하여 백 엔 드 에 데 이 터 를 전달 할 때 문제 가 생 겼 습 니 다. 자신 이 간단하게 연 구 를 해서 정 리 를 했 습 니 다.

  • 문제 발견
  • 처음에 제 ajax 요청 은 이렇게 썼 습 니 다
  •         $("#error_data").click(function (){
                var url = "/show/test_json/";
                var data = {
                    "list": [1,2],
                    "name": "xxx",
                    "text": "   "
                };
    
                $.ajax({
                    url: url,
                    data: data,
                    type: "POST",
                    contentType : "application/json",
                    traditional: true,
                    success: function(data) {
                        console.log(data);
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            });
    
  • 그리고 제 가 백 엔 드 에서 받 은 데이터 가 이 렇 더 라 고요
  • 	print(request.POST)
        print(request.method)
        print(request.body)
    
    
    POST
    b'list=1&list=2&name=xxx&text=%E4%B8%AD%E5%9B%BD%E4%BA%BA'
    
  • 내 가 request. body 에 디 코딩 을 한 후에 직렬 화 를 하려 고 했 을 때 오류 가 발생 했다
  • json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)
    

    문제 해결
  • 인터넷 에서 자 료 를 찾 아 보 니 문 제 는 제 가 뒤로 전 달 된 데 이 터 를 처리 하지 않 았 기 때 문 입 니 다.
  • json 대상 을 json 문자열 로 변환 한 다음 백 엔 드 로 전달 해 야 합 니 다
  •         $("#send_btn").click(function (){
                var url = "/show/test_json/";
                var data = {
                    "list": [1,2],
                    "name": "xxx",
                    "text": "   "
                };
    
                $.ajax({
                    url: url,
                    data: JSON.stringify(data),
                    type: "POST",
                    contentType : "application/json",
                    dataType: "text",
                    traditional: true,
                    success: function(data) {
                        console.log(data);
                        console.log(JSON.parse(data));
    
                    },
                    error: function (data) {
                        console.log(JSON.parse(data));
                    }
                });
    
            });
    
  • 백 엔 드 에서 받 은 데이터
  • 
    POST
    b'{"list":[1,2],"name":"xxx","text":"\xe4\xb8\xad\xe5\x9b\xbd\xe4\xba\xba"}'
    
  • 이렇게 하면 백 엔 드 에서 request. body 내용 을 디 코딩 한 후에 직렬 화 할 수 있 습 니 다.

  • 문제 총화
  • 전단 에서 백 엔 드 로 json 데 이 터 를 전달 할 때 JSON.stringify() json 대상 을 json 문자열 로 전환 해 야 합 니 다.
  • Django 백 엔 드 는 전단 에서 전 달 된 json 데 이 터 를 받 습 니 다. request.POST 사용 할 수 없고 request.body
  • 사용 해 야 합 니 다.
  • request.body 의 데 이 터 는 bytes 형식 이 므 로 사용 하려 면 먼저 디 코딩 해 야 합 니 다.
  • 좋은 웹페이지 즐겨찾기