Calling a django view function through jQuery Ajax

Question

I'm trying to have two views called from inside my javascript function, which are increment and decrement, which are supposed to change values within one of my models. Both these views have another argument besides request (amount). I think the best way to get this system to work is through ajax, but I cannot figure out how to make the call with multiple parameters.

Here is my javascript

$('#redButton').click(function (e) {
        var amount = $("#amount").val();
        var totalCoins = "{{ user.profile.coins }}";

        if(amount <= totalCoins && amount > 0)
        {
            //decrement total coins by amount
            var choice = 0;
            spinWheel(choice, amount);
        }


        return false;
    });

    $('#blackButton').click(function (e) {
        var amount = $("#amount").val();
        var totalCoins = "{{ user.profile.coins }}";

        if(amount <= totalCoins && amount > 0)
        {
            //decrement total coins by amount
            var choice = 1;
            spinWheel(choice, amount);
        }


        return false;
    });

    $('#greenButton').click(function (e) {
        var amount = $("#amount").val();
        var totalCoins = "{{ user.profile.coins }}";

        if(amount <= totalCoins && amount > 0)
        {
            //decrement total coins by amount
            var choice = 2;
            spinWheel(choice, amount);
        }


        return false;
    });

    function spinWheel(choice, amount){
        e.preventDefault();
        stoping = false;
        // Random between 1 and 10
        var itemSelected = Math.floor((Math.random() * 11));
        var $jump = $(this);
        //$jump.html('Jumping ...');
        $jump.attr('disabled', 'disabled');
        // Trigger autoplay owl
        $owl.trigger('play.owl.autoplay', [100]);
        // Slow speed by step
        setTimeout(slowSpeed, 2000, $owl, 200);
        setTimeout(slowSpeed, 4000, $owl, 250);
        setTimeout(slowSpeed, 5000, $owl, 300);
        setTimeout(stopAutoplay, 6000);

        if(choice == 0)
        {
            if(itemSelected != 0 && itemSelected % 2 == 0)
            {
                amount = amount * 2;
                //Call ajax function to increment by amount
            }
        }
        else if(choice == 1)
        {
            if(itemSelected != 0 && itemSelected % 2 != 0)
                {
                    amount = amount * 2
                    //Call ajax function to increment by amount 
                }
        }
        else if(choice == 2)
            {
                if(itemSelected == 0)
                    {
                        amount = amount * 6;
                        //Call ajax function to increment by amount 
                    }
            }

        return false;
    }

and here is my Django Views

@login_required
def Decrement(request, amount):
    profile = get_object_or_404(Profile, user=request.user)

    if amount <= profile.coins:
        profile.coins -= amount
        profile.save(update_fields=['coins'])
    else:
        #change this later to return an error
        return HttpResponse('')
    profile.coins -= amount

    return HttpResponse('') #return void

@login_required
def Increment(request, amount):
    profile = get_object_or_404(Profile, user=request.user)
    profile.coins += amount
    profile.save(update_fields=['coins'])
    return HttpResponse('') #return void

Thanks!

Answer 1

Django exposes REST API which performs a specific action. You are calling the views using Ajax. API has many different methods like GET , POST , etc. using which you can attach your params in request header and then retrieve it in Django views.

For example using GET Method:

You can attach mulitple params in the Ajax URL.

Make an Ajax call to localhost:8000/increment?amount=5&persist=yes on Frontend

In Django Views you can retrieve it back using request.GET.get('key', 'default_value')

@login_required
def Increment(request, amount):
    if request.method=="GET":
        amount = request.GET.get('amount', 0) # returns 5
        persist = request.GET.get('persist', 'no') #returns yes