使用Django呈现请求

时间:2013-06-06 08:26:23

标签: python django

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

1 个答案:

答案 0 :(得分:1)

问题在于您提交表单的方式。由于您正在使用ajax - 生成的HTML将被发送回您的ajax调用,其中不会呈现并简单地将其丢弃。

解决此问题:

  1. 使用标准表单(不要忘记{% csrf_token %}。然后,您可以像现在一样呈现模板 - 或者 - 重定向到视图,这是POST请求的最佳做法。
  2. 如果要使用ajax,请使用回调捕获结果,然后呈现响应。如果您想这样做,只需返回没有模板的JSON。使用results.html
  3. 中的javascript更新您的表单HTML