Python 使用Django呈现请求_Python_Django

Python 使用Django呈现请求

python django

Python 使用Django呈现请求,python,django,Python,Django,我在我的views.py中编写了一个方法，这样我就可以显示一个GET请求的表单（formExample1.html），在提交表单并完成一些工作后，我会显示一个结果页面（results.html）表单显示正确，提交表单时，Django服务器会正确生成并接收POST请求，因此它会执行所有应该执行的操作，但最终不会呈现结果页面：浏览器停留在表单页面 def formExample1(request): print 'RECEIVED REQUEST: ' + request.method

我在我的views.py中编写了一个方法，这样我就可以显示一个GET请求的表单（formExample1.html），在提交表单并完成一些工作后，我会显示一个结果页面（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，但这是另一回事）。因此：


var-lon=5；
var-lat=40；
var=5；
var映射，层；
函数init（）{
map=newOpenLayers.map（'map'）；
层=新的OpenLayers.layer.WMS（“OpenLayers WMS”，
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{层：'基本'}）；
map.addLayer（层）；
map.setCenter（新OpenLayers.LonLat（lon，lat），zoom）；
//这里是我试图获取我传递的geojson的地方，但我认为这是错误的。无论如何，这与当前的问题无关
var-featurecollection={{geo_-json}安全}；
var geojson_format=new OpenLayers.format.geojson（）；
var vector_layer=新的OpenLayers.layer.vector（）；
map.addLayer（矢量层）；
vector_layer.addFeatures（geojson_format.read（featurecollection））；
}
GeoJSON示例
JSON，GeoJSON

演示GeoJSON格式的使用。

本例使用GeoJSON格式

这是99%相同的HTML发布作为一个。所以我想没关系。问题一定在别的地方

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>


.ui滑块.ui滑块句柄{z-index:1；}
$（函数（）{
函数getCookie（名称）{
var-cookieValue=null；
if（document.cookie&&document.cookie！=''）{
var cookies=document.cookie.split（“；”）；
对于（变量i=0；i

间隔时间：



门槛：




玩

问题在于如何提交表单。因为您使用的是ajax，所以生成的HTML将被发送回ajax调用，在那里它不会被呈现，只是被丢弃

要解决此问题，请执行以下操作：

使用标准表单（不要忘记

{%csrf\u token%}

。然后可以按现在的方式呈现模板，或者重定向到视图，这是

POST

请求的最佳实践

如果要使用ajax，请使用回调捕获结果，并呈现响应

<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>