如何解决Django 视图有时会路由到错误的 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。地址经过地理编码，并将 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/ 并让页面重定向，因此它正在重定向到该网址。
您可以将响应更改为 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,y)
response['status'] = 'success'
response['data'] = {'id': 1,'Address': address}
except Exception as e:
print(e)
response['status'] = 'error'
response['error'] = e
return JsonResponse(response)
这可能需要一些清理，因为我只是在输入 SO，但这是总体思路
edit - 此外，这将导致 javascript 方面的一些更改 - 您需要查找错误状态并处理它，并从数据值中获取数据，而不仅仅是返回的对象本身。
edit 2 - 确保按下按钮时表单实际上并未提交（即使您没有明确说明，它也被视为提交按钮）。您可以将 onsubmit="return false;" 添加到表单本身，或者在 jquery 中 done 方法的末尾添加 return false;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
