Django + AJAX查询模型没有刷新页面

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> 

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

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

1. 我在框中键入机场代码 - 让我们说EGLL

2. 我点击“提交“我想看看下面的以下内容：

   • 名称：希思罗
   • ICAO：EGLL
   • 纬度：机场纬度
   • 经度：东经机场
   • 机场类型：XXX英尺

在此先感谢：

升降式机场。 Michal

Answer 1

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

Answer 2

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

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