Django + AJAX查询模型，无需刷新页面

Question

我正在尝试在Django中创建一个应用。 我在不刷新页面的情况下努力查询模型。

我想要的是：一个HTML表单，文本框和一个Submit按钮，单击该按钮后，我希望能够看到机场的详细信息。

这是我的模型：

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

这是我的看法：

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))

视图已修改，我想使其从列表中显示前50个机场，并且该机场已经正常运行（没有任何按钮按下事件）。 我试图弄清楚如何从表单中获取“ icao”参数，并在搜索表单下方显示有关机场的信息。

这是html：

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

我不期望有一个完整的解决方案，如果有人能够告诉我从哪里开始，我将不胜感激。 我进行了一些搜索，但找不到任何我无法理解的内容，因为我真的不想更新数据库，只需阅读一下即可。

编辑：所以仅作总结，因为它可能很难理解-我想要实现的是：

1. 我在框中输入机场代码-假设是EGLL

2. 我点击“提交”，我想在下面看到以下内容：

   • 名称：希思罗机场
   • 国际民航组织：埃格尔
   • 纬度：机场纬度
   • 经度：机场经度
   • 机场类型：机场类型
   • 海拔：xxx英尺

提前致谢。 米哈尔

Answer 1

如果您不想重新加载页面，则需要使用JavaScript发送XMLHttpRequest。 有关此内容的详细信息，请参见以下答案： 使用XMLHttpRequest发送POST数据

您将要用该示例中的“警报”代替，以使用响应中的航班信息更新页面。

Answer 2

没有JS（需要刷新），您需要指定2个属性值

action ：数据应发送到的网址，

方法 ：一种发送数据的方法，

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

用JS

action ：数据应发送到的网址，

方法 ：一种发送数据的方法，

id_to_display_result ：一个div ID注入获取的结果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();
        }
    }
}