Django 视图有时路由错误 URL
Django view sometimes routes to wrong URL
我有一个采用这种布局的 Django 项目
在urls.py
from django.contrib import admin
from django.conf.urls import url as path
from mapping import views
urlpatterns = [
path('admin/', admin.site.urls),
path('map/', views.Map, name='map'),
path('address',views.Address_Search,name='address')
]
views.py
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse,HttpResponse
import geocoder
import pdb
bingkey='mykey'
def Map(request):
return render(request,'mapping.html')
@csrf_exempt
def Address_Search(request):
try:
address=request.POST.get('fname')
print(address)
g = geocoder.bing(address,key=bingkey)
x,y= g.latlng[1],g.latlng[0]
print(x,y)
return JsonResponse({'id': 1,'x': x, 'y': y,'Address': address})
except Exception as e:
print(e)
return render(request,'mapping.html')
在模板中我有一个 mapping.html 其中包含
{% block content %}
<html>
{% load static %}
{% load leaflet_tags %}
{% load bootstrap4 %}
<head>
{% leaflet_js %}
{% leaflet_css %}
{% bootstrap_css %}
<title>Sals Food</title>
<style type="text/css">
#map {width: 100%;height:800px;}
</style>
<link rel="stylesheet" type="text/css" href="{% static 'search_bar.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap-4.0.0-dist/css/bootstrap.css' %}" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<script type="text/javascript" src="{% static 'jquery/jquery-3.3.1.min.js' %}" > </script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}" > </script>
<script type="text/javascript" src="{% static 'turf/turf.min.js' %}" > </script>
<script type="text/javascript" src="{% static 'basemaps/leaflet-providers.js' %}" > </script>
<script>
function subForm()
{
var jsdata = {"fname": $('#fname').val()};
console.log(jsdata);
var url = "/address/";
var jqHdr = $.ajax({
async: true,
cache: false,
type: "POST",
url: url,
data: jsdata,
dataType: "json"
}).done(function (data, textStatus) {
if (data.id == 1)
{
console.log("Longitude: "+data.x + " Latitude: "+data.y + " Address "+data.Address );
$('#map').remove();
var t = $("<div id='map'></div>");
$("body").append(t);
createmap(data.x,data.y,data.Address);
}
});
}
function createmap(x,y,address){
var map = L.map('map');
map.setView([40.70,-73.90], 11);
var boros = new L.GeoJSON.AJAX("../static/boros.geojson",{
onEachFeature: function(feature,layer){
layer.bindPopup(feature.properties.boro_name)
}
});
boros.addTo(map);
L.marker([y, x]).addTo(map).bindPopup(address);
lyrOSM = L.tileLayer.provider('OpenStreetMap.Mapnik');
lyrESRIWSM = L.tileLayer.provider('Esri.WorldStreetMap');
lyrESRITopo = L.tileLayer.provider('Esri.WorldTopoMap');
lyrESRIImagery = L.tileLayer.provider('Esri.WorldImagery').addTo(map);
objBaseMaps = {
"Street - OSM":lyrOSM,
"Street - ESRI":lyrESRIWSM,
"Imagery - ESRI Imagery":lyrESRIImagery,
"Topo - ESRI Topo":lyrESRITopo,
};
ctlLayers = L.control.layers(objBaseMaps,{}, {sortLayers:true}).addTo(map);
}
</script>
</head>
<body>
<div class="s01">
<form action="/address/" method="post">
<div class="inner-form">
<div class="input-field second-wrap">
<input type="text" id="fname" name="fname" value="Enter a address">
</div>
<div class="input-field third-wrap">
<button class="btn-search" onclick="subForm()" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
{% endblock %}
工作原理
用户像这样在 http://localhost:8000/map/ 上输入地址
输入的地址被放入 html POST 请求表单并使用 AJAX 将 POST 请求通过管道传递给 view.py Address_Search.地址经过地理编码，它 returns x、y 和地址返回页面。对于此示例，它运行良好，因为您可以看到输出是正确的。
[3]: https://i.stack.imgur.com/hKYU3.jpg
[![在此处输入图片描述][3]][3]
问题
有时我输入了错误的地址或只是随机输入的字母
例如，我刚刚输入 55 water street，这就是返回的内容。它不会在 Address_Search 视图中抛出错误，它会对输入进行地理编码，但由于某种原因它会重定向到 http://localhost:8000/address/ 大多数情况下，如果地址准确，这不会发生，这就是我的原因很困惑。我这里一定有问题...
// 20210120180356
// http://localhost:8000/address/
{
"id": 1,
"x": -74.00910186767578,
"y": 40.70320129394531,
"Address": "55 water street"
}
地址 api 某处似乎有误。我会在 django 方面深入研究它，看看是什么原因造成的。但是，当该错误被抛出时，您正在使用 render，它将呈现您提供的 html 模板并让页面重定向。由于您正在调用 /address/ 并让页面重定向，因此它会重定向到 url.
您可以将响应更改为 json 响应。我会同时更改 try 和 catch，并包含一个 status 键值对以及您想要的数据。
@csrf_exempt
def Address_Search(request):
try:
address=request.POST.get('fname')
print(address)
g = geocoder.bing(address,key=bingkey)
x,y= g.latlng[1],g.latlng[0]
print(x,y)
return JsonResponse({'status': 'success', 'data': {'id': 1,'x': x, 'y': y,'Address': address}})
except Exception as e:
print(e)
return JsonResponse({'status': 'error', 'error': e})
您甚至可以稍微清理一下，特别是通过使用一个 JsonResponse：
@csrf_exempt
def Address_Search(request):
response = {'status': None,
'data': None,
'error': None,
}
try:
address=request.POST.get('fname')
print(address)
g = geocoder.bing(address,key=bingkey)
x,y= g.latlng[1],g.latlng[0]
print(x,y)
response['status'] = 'success'
response['data'] = {'id': 1,'x': x, 'y': y,'Address': address}
except Exception as e:
print(e)
response['status'] = 'error'
response['error'] = e
return JsonResponse(response)
这可能需要一些清理，因为我只是输入 SO，但这是一般的想法
edit - 此外，这将导致 javascript 方面发生一些变化 - 您需要查找错误状态并进行处理，并从数据值而不是只是返回的对象本身。
编辑 2 - 确保当您按下按钮时表单实际上并未提交（即使您没有明确说明，它也被视为提交按钮）。您可以将 onsubmit="return false;" 添加到表单本身，或者在 jquery 中的 done 方法的末尾添加 return false;
我有一个采用这种布局的 Django 项目
在urls.py
from django.contrib import admin
from django.conf.urls import url as path
from mapping import views
urlpatterns = [
path('admin/', admin.site.urls),
path('map/', views.Map, name='map'),
path('address',views.Address_Search,name='address')
]
views.py
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse,HttpResponse
import geocoder
import pdb
bingkey='mykey'
def Map(request):
return render(request,'mapping.html')
@csrf_exempt
def Address_Search(request):
try:
address=request.POST.get('fname')
print(address)
g = geocoder.bing(address,key=bingkey)
x,y= g.latlng[1],g.latlng[0]
print(x,y)
return JsonResponse({'id': 1,'x': x, 'y': y,'Address': address})
except Exception as e:
print(e)
return render(request,'mapping.html')
在模板中我有一个 mapping.html 其中包含
{% block content %}
<html>
{% load static %}
{% load leaflet_tags %}
{% load bootstrap4 %}
<head>
{% leaflet_js %}
{% leaflet_css %}
{% bootstrap_css %}
<title>Sals Food</title>
<style type="text/css">
#map {width: 100%;height:800px;}
</style>
<link rel="stylesheet" type="text/css" href="{% static 'search_bar.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap-4.0.0-dist/css/bootstrap.css' %}" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
<script type="text/javascript" src="{% static 'jquery/jquery-3.3.1.min.js' %}" > </script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}" > </script>
<script type="text/javascript" src="{% static 'turf/turf.min.js' %}" > </script>
<script type="text/javascript" src="{% static 'basemaps/leaflet-providers.js' %}" > </script>
<script>
function subForm()
{
var jsdata = {"fname": $('#fname').val()};
console.log(jsdata);
var url = "/address/";
var jqHdr = $.ajax({
async: true,
cache: false,
type: "POST",
url: url,
data: jsdata,
dataType: "json"
}).done(function (data, textStatus) {
if (data.id == 1)
{
console.log("Longitude: "+data.x + " Latitude: "+data.y + " Address "+data.Address );
$('#map').remove();
var t = $("<div id='map'></div>");
$("body").append(t);
createmap(data.x,data.y,data.Address);
}
});
}
function createmap(x,y,address){
var map = L.map('map');
map.setView([40.70,-73.90], 11);
var boros = new L.GeoJSON.AJAX("../static/boros.geojson",{
onEachFeature: function(feature,layer){
layer.bindPopup(feature.properties.boro_name)
}
});
boros.addTo(map);
L.marker([y, x]).addTo(map).bindPopup(address);
lyrOSM = L.tileLayer.provider('OpenStreetMap.Mapnik');
lyrESRIWSM = L.tileLayer.provider('Esri.WorldStreetMap');
lyrESRITopo = L.tileLayer.provider('Esri.WorldTopoMap');
lyrESRIImagery = L.tileLayer.provider('Esri.WorldImagery').addTo(map);
objBaseMaps = {
"Street - OSM":lyrOSM,
"Street - ESRI":lyrESRIWSM,
"Imagery - ESRI Imagery":lyrESRIImagery,
"Topo - ESRI Topo":lyrESRITopo,
};
ctlLayers = L.control.layers(objBaseMaps,{}, {sortLayers:true}).addTo(map);
}
</script>
</head>
<body>
<div class="s01">
<form action="/address/" method="post">
<div class="inner-form">
<div class="input-field second-wrap">
<input type="text" id="fname" name="fname" value="Enter a address">
</div>
<div class="input-field third-wrap">
<button class="btn-search" onclick="subForm()" type="button">Search</button>
</div>
</div>
</form>
</div>
</body>
</html>
{% endblock %}
工作原理
用户像这样在 http://localhost:8000/map/ 上输入地址
输入的地址被放入 html POST 请求表单并使用 AJAX 将 POST 请求通过管道传递给 view.py Address_Search.地址经过地理编码，它 returns x、y 和地址返回页面。对于此示例，它运行良好，因为您可以看到输出是正确的。 [3]: https://i.stack.imgur.com/hKYU3.jpg [![在此处输入图片描述][3]][3]
问题
有时我输入了错误的地址或只是随机输入的字母
例如，我刚刚输入 55 water street，这就是返回的内容。它不会在 Address_Search 视图中抛出错误，它会对输入进行地理编码，但由于某种原因它会重定向到 http://localhost:8000/address/ 大多数情况下，如果地址准确，这不会发生，这就是我的原因很困惑。我这里一定有问题...
// 20210120180356
// http://localhost:8000/address/
{
"id": 1,
"x": -74.00910186767578,
"y": 40.70320129394531,
"Address": "55 water street"
}
地址 api 某处似乎有误。我会在 django 方面深入研究它，看看是什么原因造成的。但是，当该错误被抛出时，您正在使用 render，它将呈现您提供的 html 模板并让页面重定向。由于您正在调用 /address/ 并让页面重定向，因此它会重定向到 url.
您可以将响应更改为 json 响应。我会同时更改 try 和 catch，并包含一个 status 键值对以及您想要的数据。
@csrf_exempt
def Address_Search(request):
try:
address=request.POST.get('fname')
print(address)
g = geocoder.bing(address,key=bingkey)
x,y= g.latlng[1],g.latlng[0]
print(x,y)
return JsonResponse({'status': 'success', 'data': {'id': 1,'x': x, 'y': y,'Address': address}})
except Exception as e:
print(e)
return JsonResponse({'status': 'error', 'error': e})
您甚至可以稍微清理一下，特别是通过使用一个 JsonResponse：
@csrf_exempt
def Address_Search(request):
response = {'status': None,
'data': None,
'error': None,
}
try:
address=request.POST.get('fname')
print(address)
g = geocoder.bing(address,key=bingkey)
x,y= g.latlng[1],g.latlng[0]
print(x,y)
response['status'] = 'success'
response['data'] = {'id': 1,'x': x, 'y': y,'Address': address}
except Exception as e:
print(e)
response['status'] = 'error'
response['error'] = e
return JsonResponse(response)
这可能需要一些清理，因为我只是输入 SO，但这是一般的想法
edit - 此外，这将导致 javascript 方面发生一些变化 - 您需要查找错误状态并进行处理，并从数据值而不是只是返回的对象本身。
编辑 2 - 确保当您按下按钮时表单实际上并未提交（即使您没有明确说明，它也被视为提交按钮）。您可以将 onsubmit="return false;" 添加到表单本身，或者在 jquery 中的 done 方法的末尾添加 return false;