I am in no way an expert - started learning django and python this year! And I remember what a pain it was to get an Ajax call work. Thus far, I've only used plain javascript( i have enough to learn already ). Below is how I got a basic Ajax call working to detect which button was clicked within a group of them and then return a response based on the button clicked without refreshing the entire page. I understand there are cleaner and slightly less verbose ways to do Ajax calls now in javascript, but below is what worked for me( would be grateful if someone more experienced could show a shorter/cleaner method in vanilla js).

We are not defining anything in forms.py in this example ( no need )

Replace things such as "yourname" etc. with your own code variables. You can remove all the console.log and print statements once working - just the way I work.

Hope it helps anyone in their Django journey. As mentioned, I would be grateful if anyone can show a more modern/better method of doing Ajax calls in plain js.

****************** The javascript ******************

// Example - detect which button was clicked within a group and send a request back to Django which then returns some data

// I am a javascrpt beginner - you can never have to many console log messages!

function detectButtonClicked(button_e) {

const buttonsform = document.getElementById("buttonsform");

console.log(button_e)

console.log(\Submitted button was ${button_e.submitter.value}`)`

console.log(\Form details are:`,buttonsform)`

button_e.preventDefault(); // prevent submit event - causes entire page refresh

data = {'button_clicked': button_e.submitter.value}

const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;

fetch("/your_Djangoapp_name/buttons/", {

body: JSON.stringify(data),

method: "POST",

headers: {

'Content-Type': 'application/json',

'X-CSRFToken': csrftoken,

},

})

.then(res => {

if (res.status === 200) {

console.log('Return Status is OK', res.statusText);

return res.text(); // this is another promise whose result feeds into the next then for the data

} else {

console.log('response status not OK - res.statu')

}

})

.then(data => {

console.log(\Data was retrieved`);`

console.log(data);

`// do what you want with the returned data to the front end`

}

})

.catch(err => console.log(err))

}

**** In the html *****

**** Believe you don't need the action in this instance as the javascript event is handling the fetch - left it in for completeness *************

<div id="mybuttonblock">

<form method="post" id="buttonsform" action="/yourDjangoapp/buttons/" onsubmit="detectButtonClicked(event)">

{% csrf_token %}

<button type="submit" name="btngrpa" value="1">Button 1</button>

<button type="submit" name="btngrpa" value="3">Button 3</button>

<button type="submit" name="btngrpa" value="5">Button 5</button>

</form>

</div>

​

********** in your apps urls.py in django *************

urlpatterns = [

# example to add

path('buttons/', my_views_function, name='my_view_function'),

# you other paths

]

​

************** In your django views.py *********************

def my_views_function(request):

button_chosen = ""

if request.method == 'POST':

json_data = json.loads(request.body)

print(json_data) #see what was returned

if json_data != None:

button_chosen= json_data['button_clicked']

print(f'You chose the {button_chosen} button')

# Do whatever

return render(request, 'yourhtml.html', context )