Question

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

我想要的是：HTML，文本框和提交按钮中的表单，点击按钮后，我希望能够看到机场的详细信息。

这是我的模特：

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>

我不希望有完整的解决方案，如果有人能够告诉我从哪里开始，我将不胜感激。我做了一些搜索，但无法找到任何我能理解的东西，因为我不想更新数据库，只需阅读它。

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

我在框中输入机场代码 - 比方说EGLL
点击“提交”，我想看到以下内容：
- 姓名：Heathrow
- ICAO：EGLL
- 纬度：机场纬度
- 经度：机场经度
- 机场类型：机场类型
- 海拔：xxx ft。

提前致谢。米甲

Answer 1

如果您不想重新加载页面，则需要使用JavaScript发送XMLHttpRequest。有关详情，请参阅此答案：Send POST data using XMLHttpRequest

您需要将该示例中的“警报”替换为使用响应中的航班信息更新页面的内容。

Answer 2

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

操作：数据应发送到的网址，

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

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

使用JS

操作：数据应发送到的网址，

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

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();
        }
    }
}

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

2 个答案: