Django + AJAX query model without refreshing the page

Question

I'm trying to create an app in Django. I'm struggling to query my model without refreshing the page.

What I want is: a form in HTML, text box and a Submit button, and after the button is clicked I want to be able to see the details of the airport.

Here's my model:

from __future__ import unicode_literals

from django.db import models


class Airportslist(models.Model):
    icao = models.TextField(db_column='ICAO', blank=True, null=False, primary_key=True)  # Field name made lowercase.
    type = models.TextField(db_column='Type', blank=True, null=True)  # Field name made lowercase.
    name = models.TextField(db_column='Name', blank=True, null=True)  # Field name made lowercase.
    lat = models.FloatField(db_column='LAT', blank=True, null=True)  # Field name made lowercase.
    lon = models.FloatField(db_column='LON', blank=True, null=True)  # Field name made lowercase.
    elevation = models.IntegerField(db_column='Elevation', blank=True, null=True)  # Field name made lowercase.
    country = models.TextField(db_column='Country', blank=True, null=True)  # Field name made lowercase.
    region = models.TextField(db_column='Region', blank=True, null=True)  # Field name made lowercase.

def __str__(self):
    return self.icao

Here is my view:

def detail(request, icao):
first_50_airports = Airportslist.objects.filter(name=icao)
template = loader.get_template('nearestAirportApp/index.html')
print(first_50_airports[0].lat - 10)
context = {
    'first_50_airports': first_50_airports,
}
return HttpResponse(template.render(context, request))

The view is modified, I wanted to make it show first 50 airports from the list and that has worked (without any button press event). I'm trying to figure out how to get that to get the 'icao' parameter from my form and display the info about the airport beneath the search form.

And here's the html:

<form id="icao_search">
<input type="text" id="icao">
<input type="submit" value="SUBMIT">
</form>

I don't expect a full solution, I would appreciate if someone would be able to tell me where to start. I did some search but was unable to find anything that I'd be able to understand as I don't really want to update the database, just read it.

EDIT: So just to summarise as it might be hard to understand - what I want to achieve is:

1. I type airport code in the box - let's say EGLL

2. I click 'submit' and I want to see the following below:

   • Name: Heathrow
   • ICAO: EGLL
   • Latitude: airport latitude
   • Longitude: airport longitude
   • Airport type: type of the airport
   • Elevation: xxx ft.

Thanks in advance. Michal

Answer 1

Without JS (Need refresh) You need to specify 2 attribute values

action : an url for where data should send and,

method : a method to send the data,

<form id="icao_search" action="/path/to/api" method="get">
 <input type="text" id="icao">
<input type="submit" value="SUBMIT">
</form>

With JS

action : an url for where data should send and,

method : a method to send the data,

id_to_display_result : a div id to inject fetched result html

document.onreadystatechange = function() {
    if (document.readyState === "complete") {
        document.querySelector("#icao_search input[type='submit']").onclick = function(e) {
            e.preventDefault();
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("id_to_display_result").innerHTML =
                        this.responseText;
                }
            };
            xhr.open("GET", "/path/to/api", true);
            xhr.send();
        }
    }
}

Answer 2

If you don't want the page to reload, you'll need to use JavaScript to send an XMLHttpRequest. For details on that, see this answer: Send POST data using XMLHttpRequest

You'll want to replace the "alert" in that example with something that updates the page with flight info from the response.