Codong's Development Diary RSS ํƒœ๊ทธ ๊ด€๋ฆฌ ๊ธ€์“ฐ๊ธฐ ๋ฐฉ๋ช…๋ก
2021-03-20 22:36:53

๐Ÿ˜† ๊ฐœ์š”


django๋กœ ์›น ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“ค์–ด ๋ณด๋ฉด์„œ ๋น„๋™๊ธฐ ๋ฐฉ์‹์„ ์•ˆ ์จ๋ณผ ์ˆ˜๊ฐ€ ์—†๋‹ค. ๊ทธ!๋ž˜!์„œ! ๋น„๋™๊ธฐ ํ†ต์‹  ๋ฐฉ์‹์œผ๋กœ ๋งŽ์ด ์ด์šฉํ•˜๊ณ  ์žˆ๋Š” jquery์˜ ajax์˜ ์ •๋ง ๊ธฐ์ดˆ์ ์ด ์‚ฌ์šฉ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•œ๋‹ค. ํ˜น์‹œ๋ผ๋„ ๋„์›€์ด ๋˜๋Š” ๋ถ„๋“ค์ด ์žˆ์„๊นŒ๋ด ํฌ์ŠคํŒ…ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.
(์‚ฌ์‹ค ๋‚ด๊ฐ€ ๋ชจ๋ฅด๊ณ  ์žˆ์–ด์„œ ์•ˆ ๊นŒ๋จน์œผ๋ ค๊ณ ..)

์‹œ์ž‘ํ•˜๊ธฐ ์•ž์„œ, ajax๊ฐ€ ๋ญ˜๊นŒ?๋ผ๋Š” ์ƒ๊ฐ์ด ๋จผ์ € ๋“ ๋‹ค.


Ajax(Asynchornous Javascript And XML)๋ž€?

AJAX๋ž€, JavaScript์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ Asynchronous Javascript And Xml(๋น„๋™๊ธฐ์‹ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ xml)์˜ ์•ฝ์ž์ด๋‹ค. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ฐ€์ง€๊ณ ์žˆ๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•ด์„œ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜์ง€ ์•Š๊ณ ๋„ ํŽ˜์ด์ง€์˜ ์ผ๋ถ€๋งŒ์„ ์œ„ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๋กœ๋“œํ•˜๋Š” ๊ธฐ๋ฒ• ์ด๋ฉฐ JavaScript๋ฅผ ์‚ฌ์šฉํ•œ ๋น„๋™๊ธฐ ํ†ต์‹ , ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„๊ฐ„์— XML ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธฐ์ˆ ์ด๋‹ค.

์ฆ‰, ์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ ์„œ๋ฒ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๋Š” ๊ฒƒ์ด๋‹ค.


๐Ÿ˜Ž Vใ…”๋ฆฌ ๊ฐ„๋‹จํ•œ ์‚ฌ์šฉ๋ฒ•.


๋„ˆ๋ฌด ์‰ฌ์šฐ๋ฏ€๋กœ ๋ฌป๊ณ  ์ฝ”๋“œ๋กœ ๊ฐ„๋‹ค.

1๏ธโƒฃ html ๋ถ€๋ถ„

<!-- head ๋ถ€๋ถ„ -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- body ๋ถ€๋ถ„ -->
<script type="text/javascript">
$('#submit').on('click', function(e) {
    data = $('#text').val();
    $.ajax({
        type:'POST',
        url:'127.0.0.1:8000/home',
        data:JSON.stringify(data),
        success:function(json){
            console.log("data pass success",json);
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); 
        }
   });
  });


</script>

ajax ๋ถ€๋ถ„์„ ์›ํ•˜๋Š” ์ด๋ฒคํŠธ function(์œ„ ์˜ˆ์ œ์—์„  submit click์‹œ)์•ˆ์— ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค. ์ค‘๊ฐ„์ค‘๊ฐ„ ๋‚˜์˜ค๋Š” $๋Š” jquery ๋ฌธ๋ฒ•์ด๋‹ค.


โž• jquery๋ž€?

  • ์›น์‚ฌ์ดํŠธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‰ฝ๊ฒŒ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” ์˜คํ”ˆ์†Œ์Šค ๊ธฐ๋ฐ˜์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค.
  • ๊ฐ„๋‹จํ•˜๊ฒŒ ์›นํŽ˜์ด์ง€ ์ƒ์—์„œ $ ๋ฅผ ์‚ฌ์šฉํ•ด์„œ Element๋ฅผ ์‰ฝ๊ฒŒ ์ฐพ๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค.
    • $('#foo') = id๊ฐ€ foo ์ธ Element
    • $('.foo') = class๊ฐ€ foo ์ธ Element

โž• data:JSON.stringify(data) ์—์„œ JSON.stringify๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  • ์š”์ฒญ์„ ๋ฐ›๋Š” views.py์—์„œ json ํŒŒ์‹ฑ์„ ์ˆ˜์›”ํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด strํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด์„œ ๋ณด๋ƒ„.

2๏ธโƒฃ ์š”์ฒญ์„ ๋ฐ›๋Š” views.py ๋ถ€๋ถ„

from django.http import JsonResponse

def home(request):
    # POST ์š”์ฒญ์ผ ๋•Œ
    if request.method == 'POST':
        data = json.loads(request.body)
        # do something
        print(data)

        context = {
            'result': data,
        }
        return JsonResponse(context)

home function์—์„œ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ json.loads๋กœ dic๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์š”๋ฆฌ์กฐ๋ฆฌ ์กฐ๋ฆฌํ•˜๊ณ , ๋‹ค์‹œ ๊ฒฐ๊ณผ๊ฐ’์„ dictํ˜•ํƒœ๋กœ ๋งŒ๋“ค์–ด์„œ JsonResponse๋ฅผ ์ด์šฉํ•ด์„œ ์ „๋‹ฌํ•œ๋‹ค.


โž• flask ์“ธ ๋•Œ์ฒ˜๋Ÿผ ๊ทธ๋ƒฅ return json.dumps(context)๋ฅผ ํ•ด์„œ ๋ณด๋‚ด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ์—๋Ÿฌ๊ฐ€ ๋œฌ๋‹ค..

AttributeError: 'str' object has no attribute 'get'
[20/Mar/2021 11:36:08] "POST /home HTTP/1.1" 500 60851

๐Ÿค— ๋งˆ๋ฌด๋ฆฌ


์•„์ฃผ ๊ธฐ์ดˆ์ ์ธ ๋ถ€๋ถ„์ธ๋ฐ ์ด๋Ÿฐ ๊ฒƒ์— ๋ง‰ํ˜€์„œ ์‹œ๊ฐ„์„ ๋ปˆ๊ฒผ๋˜, ์‰ฌ์šด ๋ฐฉ๋ฒ•์ด ์žˆ์—ˆ๋Š”๋ฐ ์–ด๋ ต๊ฒŒ ํ•˜๋˜ ๋‚ด ์ž์‹ ์ด ๋ถ€๋„๋Ÿฝ๊ธด ํ•˜์ง€๋งŒโ€ฆ ๊ทธ๋ž˜๋„ ์ด๋Ÿฐ ๊ธฐํšŒ๋ฅผ ํ†ตํ•ด ์•Œ๊ฒŒ ๋๋‹ค!! ์•ˆ๊นŒ๋จน๊ธฐ ์œ„ํ•ด์„œ ํฌ์ŠคํŒ…์„ ๋งŽ์ด๋งŽ์ด ํ•ด๋‘์ž..๐Ÿ˜ข


reference

'python > django' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[django] mysql + docker-compose  (1) 2022.12.25
[django] Forbidden (CSRF token missing or incorrect.) ํ•ด๊ฒฐํ•˜๊ธฐ!  (2) 2021.03.20