Question

我用jquery-ui构建了一个小表单，带有一个日期选择器，一对滑块，一个微调器和一个按钮。按下按钮时，表单中的某些值应通过POST发送到服务器。但我正在观看Firefox Web Developer Console，并且没有POST发生。我做错了什么？

我使用Django作为Web服务器，我的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">

    <script>
    // DatePicker function:
    $(function() {
        var today = new Date()
        $( "#id_startDate" ).datepicker({
            minDate: today,
            onSelect: function(selectedDate) {
                var option = this.id == "id_startDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                dates.not(this).datepicker("option", option, date);
            }
        });
    });

    // 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($( "#id_interval" ).slider( "values", 0) / 24) + 1
            var startHour = $( "#id_interval" ).slider( "values", 0) % 24
            var endDay = Math.floor($( "#id_interval" ).slider( "values", 1) / 24) + 1
            var endHour = $( "#id_interval" ).slider( "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()
        }
        $.post('/vpl/', 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>
</html>

额外球：当Datepicker出现时，两个滑块标记都停留在Datepicker上，这有点烦人。对此也有任何想法吗？

Answer 1

我将您的代码粘贴并复制到jsFiddle。

我尝试过，当我点击“播放”按钮时，我可以在Firebug中看到POST已发送。

$( "#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()
    }
    $.post('/vpl/', postdata)
});

这些值已发布：

endhour 56
STARTDATE
starthour 8
阈值 15

显然答案是404。

所以你的代码对我来说似乎很好。

发布JQuery-UI表单值

1 个答案: