클론코딩 4- Ajax

<!-- jquery 사용하기 위해 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div id="basket"; style = "background: ghostwhite; width: 145px; height: 120px; position: fixed; right: 85% ;text-align : center; line-height : 50px; cursor:pointer">
    <p id="menu1_menuName" style="font-size:120%">{{ menu1.menuName }}</p>
    <p id= "menu1_price" style="font-size:155%">{{ menu1.price }}</p>

 

<!-- Optional JavaScript; choose one of the two! -->
<script >

    document.getElementById("basket").onclick = function () {

        var basket={
            menuName : document.getElementById('menu1_menuName').innerText
            ,price : document.getElementById('menu1_price').innerText
        }

        $.ajax({
            url: '/menu/upload',
            dataType: 'json',
            data: basket,
            type: 'post',

        })
    };


</script>

 

 

 

view

class upload(APIView):
    def post(self, request):
        menuName = request.data.get("menuName")
        price = request.data.get("price")

        print(menuName)
        print(price)

        basket.objects.create(menuName=menuName, price=price)

        return Response(status=200)

 

 

url

path('menu/upload',upload.as_view()),