我在views.py中编写了一个方法,这样我就可以显示一个GET请求表单(formExample1.html),并在提交一个带有POST的表单并做一些事情后,我就是显示结果页面(results.html)。
表单被正确显示,并且在提交表单时,Django服务器正确生成并接收POST请求,因此它会执行它应该执行的所有操作,但最终它不会呈现结果页面:浏览器停留在表单页面。
def formExample1(request):
print 'RECEIVED REQUEST: ' + request.method
if request.method == 'POST':
value1 = request.REQUEST['value1']
value2 = int(request.REQUEST['value2'])
# etc
#
geojson = createGeoJSON(value1, value2)
print geojson #json is correctly generated at printed at server console
return render(request, 'results.html', {'geo_json': geojson}) # This is what is not working
else: #GET
return render(request, 'formExample1.html') # Working OK
另外,如果我没有将geoJSON对象传递给render函数,它也不能正常工作。
我想我在这里错过了一些细节。有什么帮助吗?
编辑:我不认为显示结果页面会有所帮助,但现在是这样。它现在是一个简单的html,包括一个OpenLayers地图,并打算从geojson向地图提供数据(我仍然不知道该怎么做,因为我不知道如何让geojson通过,但这是一个不同的故事)。所以:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css">
<script src="{{STATIC_URL}}js/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
// Here is where I'm trying to get the geojson I'm passing, but I think this is wrong. Anyway has nothing to do with current problem
var featurecollection = {{ geo_json|safe }};
var geojson_format = new OpenLayers.Format.GeoJSON();
var vector_layer = new OpenLayers.Layer.Vector();
map.addLayer(vector_layer);
vector_layer.addFeatures(geojson_format.read(featurecollection));
}
</script>
</head>
<body onload="init()">
<h1 id="title">GeoJSON Example</h1>
<div id="tags">
JSON, GeoJSON
</div>
<p id="shortdesc">
Demonstrate the use of the GeoJSON format.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example uses the GeoJSON format.</p>
</div>
</body>
</html>
这是与example of OpenLayers相同的HTML的99%。所以我猜这没关系。问题必须在其他地方。
EDIT2:还添加了formExample1.html代码:
<html>
<head>
<script src="{{STATIC_URL}}js/jquery-1.9.1.js"></script>
<script src="{{STATIC_URL}}js/jquery-ui-1.10.3.custom.js"></script>
<link rel="stylesheet" href="{{STATIC_URL}}css/jquery-ui-1.10.3.custom.css">
<style type="text/css">
.ui-slider .ui-slider-handle { z-index: 1; }
</style>
<script>
$(function() {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
// DatePicker function:
$(function() {
var today = new Date()
$( "#id_startDate" ).datepicker({
minDate: 0
});
});
// Interval slider function:
$(function() {
var currentHour = new Date().getUTCHours()
$( "#id_interval" ).slider({
range: true,
min: 0,
max: 72,
values: [ currentHour, currentHour+48 ], // By default from current hour 1st day to same hour last day
slide: function( event, ui ) {
var startDay = Math.floor(ui.values[0] / 24) + 1
var startHour = ui.values[0] % 24
var endDay = Math.floor(ui.values[1] / 24) + 1
var endHour = ui.values[1] % 24
$( "#amount" ).val( "From " + startHour + ":00h day " + startDay +
" to " + endHour + ":00h day " + endDay + " (UTC)");
}
});
$( "#amount" ).val( "From " + currentHour + ":00h day 1 to " + currentHour + ":00h day 3 (UTC)");
});
// Threshold spinner selector:
$(function() {
var id_threshold = $( "#id_threshold" ).spinner();
id_threshold.spinner( "value", 15 );
id_threshold.spinner( "option", "min", 0 );
$( "button" ).button();
});
// Movie player slider:
$(function() {
$( "#player-slider" ).slider({
range: "min",
value: 0,
min: 0,
max: 1000,
slide: function( event, ui ) {
//$( "#amount" ).val( "$" + ui.value );
}
});
// Modify this line to show somehow the current displayed prediction hour
//$( "#amount" ).val( "$" + $( "#player-slider" ).slider( "value" ) );
});
// Play button
$( "#id_playButton" ).click(function() {
var postdata = {
'startdate': $("#id_startDate").datepicker("getDate"),
'starthour': $("#id_interval").slider("values", 0),
'endhour': $("#id_interval").slider("values", 1),
'threshold': $("#id_threshold").val(),
'csrfmiddlewaretoken': csrftoken
};
$.post('', postdata);
});
});
</script>
</head>
<body>
<p>Start Date: <input type="text" id="id_startDate"></p>
<p>
<label for="amount">Interval:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<p> <div id="id_interval"></div> </p>
<p>
<label for="id_threshold">Threshold:</label>
<input id="id_threshold" name="value" />
</p>
<p> <div id="player-slider"></div> </p>
<p>
<p>
<button id="id_playButton">Play</button>
</p>
</p>
</body>
答案 0 :(得分:1)
问题在于您提交表单的方式。由于您正在使用ajax - 生成的HTML将被发送回您的ajax调用,其中不会呈现并简单地将其丢弃。
解决此问题:
{% csrf_token %}
。然后,您可以像现在一样呈现模板 - 或者 - 重定向到视图,这是POST
请求的最佳做法。results.html
。