提问人：msahin 提问时间：11/13/2023 更新时间：11/13/2023 访问量：30
在 Django 模板中动态查找地址
Dynamically address lookup in Django template
问：
- 我在 Django 模板上有一个表单，其中包含 2 个字段：POSTCODE 和 HOUSE_NUMBER。 我在相关视图中有一个 address_find（） 方法。
- 当用户在不提交表单的情况下填写这 2 个字段时，我需要显示完整的地址。（换句话说，当用户输入POSTCODE和HOUSE_NUMBER时，在提交之前，我想用address_find（）方法检查地址，并在表单下显示完整的地址）
- 是否可以在 Django 模板中做到这一点？或者我需要提交表格才能这样做吗？ 谢谢。
答：
0赞
msahin
11/13/2023
#1
我找到了一个解决方案：
首先需要在 Django 视图中添加一个端点：
# views.py
from django.http import JsonResponse
def address_lookup(request):
postcode = request.GET.get('postcode')
house_number = request.GET.get('house_number')
full_address = address_find(postcode, house_number)
return JsonResponse({'full_address': full_address})
然后需要为新视图创建一个 URL 模式：
# urls.py
from django.urls import path
from .views import address_lookup
urlpatterns = [
# other patterns
path('address_lookup/', address_lookup, name='address_lookup'),
]
最后需要编写 JavaScript 来处理表单输入：
<script>
// Add event listeners to input fields
document.getElementById('postcode').addEventListener('input', updateAddress);
document.getElementById('house_number').addEventListener('input', updateAddress);
function updateAddress() {
// Get values from input fields
var postcode = document.getElementById('postcode').value;
var houseNumber = document.getElementById('house_number').value;
// Make an Ajax request to the server
var xhr = new XMLHttpRequest();
xhr.open('GET', '/address_lookup/?postcode=' + postcode + '&house_number=' + houseNumber, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// Update the displayed address
document.getElementById('fullAddress').innerText = JSON.parse(xhr.responseText).full_address;
}
};
xhr.send();
}
</script>
评论