Using AJAX to retrieve Django view return values

Question

Using AJAX to retrieve Django view return values

I am currently using Django along with AJAX,

Within my template, users have the ability to select an option and then submit their choice. Upon clicking the submit button, an Ajax function is triggered which sends the data to my view for processing, and then should return a value back to the template.

The problem arises when the POST request reaches the view - nothing is being returned to the template. It's unclear whether this is due to the view not receiving any data or if it's failing to trigger any conditional statements. The process seems to be functioning correctly but no results are being displayed.

This is how my HTML form looks:

<form method="POST" id="buy_form" name="buy_form" action="{% url 'manage:buy' %}">
    {% csrf_token %}
    <div class="buy_top_section">
        <div class="width">
            <div class="spacing">
                <h3 class="sell_title">How much do you want to sell?</h3>
                <input type="text" id="amount" class="buy_input_top" maxlength="10" name="amount" type="number" required>
                <select id="selected" class="buy_selection" name="wanted">
                    <option value="generate_b">BTC</option>
                    <option value="generate_e">ETH</option>
                    <option value="generate_l">LTC</option>
                </select>
            </div>
            <span class="float_clear"></span>
            <button id='generate' type="submit" value="currency_details" class="custom_button"l">Generate
            </button>
        </div>
    </div>
</form>

<!-- The expected output from the view -->
<h1>{{ address }}</h1>

My AJAX code snippet: $(document).on('submit', '#buy_form', function (e) { e.preventDefault()

    $.ajax({
        type: 'POST',
        url:'/manage/buy/',
        data:{
            currency:$('selected').val(),
            amount:$('#amount').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            success: function (){

            }
        })
    });

My Django View implementation:

def buy_corsair(request):

    if request.method == 'POST':

    if request.POST.get('wanted') == 'generate_b':
        # Retrieving the entered amount
        amount = request.POST.get('amount')
        # Generating a new B address
        new_b_address = client.create_address(b_account_id)['address']
        # Associating the address with the user
        request.user.user_address.b_address = new_b_address
        # Saving the address for the current user
        request.user.user_address.save()
        # Passing on the address to the template
        context = {'address': new_b_address}
        return render(request, context)

urls.py configuration:

urlpatterns = [
    # Buy Page
    path('buy/', views.buy_corsair, name='buy'),
]

python ajax django

Answer 1

Answer №1

When making Ajax requests, they run in the background and Django's render function renders a template to the body, so you cannot render this way. You could do it like this;

Don't forget to include

from django.http import HttpResponse

def buy_corsair(request):
    if request.method == 'POST':    
        if request.POST.get('wanted') == 'generate_b':
            # Get the amount entered
            amount = request.POST.get('amount')
            # Generate a new B address
            new_b_address = client.create_address(b_account_id)['address']
            # Point the address at the user
            request.user.user_address.b_address = new_b_address
            # Save address to current user
            request.user.user_address.save()
            # Pass the address to the template
            return HttpResponse(new_b_address)

In your JavaScript file;

$.ajax({
    type: 'POST',
    url:'/manage/buy/',
    data:{
        currency:$('selected').val(),
        amount:$('#amount').val(),
        'csrfmiddlewaretoken': "{{ csrf_token }}"
        },
        success: function (data){
            $('h1').html(data);
        }
    })
});

Answer 2

When making Ajax requests, they run in the background and Django's render function renders a template to the body, so you cannot render this way. You could do it like this;

Don't forget to include

from django.http import HttpResponse

def buy_corsair(request):
    if request.method == 'POST':    
        if request.POST.get('wanted') == 'generate_b':
            # Get the amount entered
            amount = request.POST.get('amount')
            # Generate a new B address
            new_b_address = client.create_address(b_account_id)['address']
            # Point the address at the user
            request.user.user_address.b_address = new_b_address
            # Save address to current user
            request.user.user_address.save()
            # Pass the address to the template
            return HttpResponse(new_b_address)

In your JavaScript file;

$.ajax({
    type: 'POST',
    url:'/manage/buy/',
    data:{
        currency:$('selected').val(),
        amount:$('#amount').val(),
        'csrfmiddlewaretoken': "{{ csrf_token }}"
        },
        success: function (data){
            $('h1').html(data);
        }
    })
});

Answer 3

Answer №2

within your Django controller

import json
from django.http import HttpResponse
def purchase_msi(request):
   if request.method == 'POST':
      if request.POST.get('desired') == 'create_m':
         # Retrieve the entered amount
         quantity = request.POST.get('quantity')
         # Generate a new M address
         new_m_address = client.create_address(m_account_id)['address']
         # Link the address to the user
         request.user.user_wallet.m_address = new_m_address
         # Save address for current user
         request.user.user_wallet.save()
         # Provide the address to the template
         context = {'address': new_m_address}
         return HttpResponse(json.dumps(context))

within your javascript file

 $.ajax({
    type: 'POST',
    url:'/manage/purchase/',
    data:{
        currency:$('chosen').val(),
        quantity:$('#quantity').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },
        success: function (response){
            console.log(response);
            //retrieve the value and display it in the console//
            var obj=JSON.parse(response)["address"];

            alert(obj);
      
        }
    })
});

Answer 4

within your Django controller

import json
from django.http import HttpResponse
def purchase_msi(request):
   if request.method == 'POST':
      if request.POST.get('desired') == 'create_m':
         # Retrieve the entered amount
         quantity = request.POST.get('quantity')
         # Generate a new M address
         new_m_address = client.create_address(m_account_id)['address']
         # Link the address to the user
         request.user.user_wallet.m_address = new_m_address
         # Save address for current user
         request.user.user_wallet.save()
         # Provide the address to the template
         context = {'address': new_m_address}
         return HttpResponse(json.dumps(context))

within your javascript file

 $.ajax({
    type: 'POST',
    url:'/manage/purchase/',
    data:{
        currency:$('chosen').val(),
        quantity:$('#quantity').val(),
        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
        },
        success: function (response){
            console.log(response);
            //retrieve the value and display it in the console//
            var obj=JSON.parse(response)["address"];

            alert(obj);
      
        }
    })
});

Using AJAX to retrieve Django view return values

Answer №1

Answer №2

Similar questions

What is the best way to convert integer values in pandas from having a "," for thousands to just a regular integer without ","?

Safari is unable to establish a connection with the local URL: http://127.0.0.1:5000

Hiding widgets using self.grid() in Tkinter

The select option fails to automatically assign the selected value from a given response

Locating an element in a table using the index number with XPath

Dropdown menu utilizing processing API and interacting with AJAX and DOM manipulation

Access the contents of a text file using encoding= cp1256 for optimal reading

Unleash the power of AJAX to dynamically load additional content on

Sending values from multiple radio groups in JavaScript can be done by accessing each group individually and extracting

Python - Merge two lists of dictionaries by checking for a specific key, and filter out any entries that do not meet the criteria

jquery accordion not functioning properly following partial ajax page refresh

What are the steps to validate an Ajax form using Dojo JavaScript?

Django: A guide to efficiently retrieving related objects along with a model instance

Creating a mouse locator program in Python: A step-by-step guide to developing a tool similar to the Free Utility for tracking mouse cursor position

Condense Python Dictionary to Boolean Values

Embed a hyperlink within an informational passage

Converting for loop to extract values from a data frame using various lists

Python code to transform a dictionary into binary format

Tips for storing data from a table using a button

The issue of Jquery not functioning properly within Ajax-included HTML documents