Question

Overview:我正在制作一个网络工具，使用图表（Highcharts）显示不同工作室在数字平台上销售的电影总数。这些图表是动态的，因此用户可以使用一系列过滤器来更改结果。

Filter 1 - Studios: 使用此过滤器，用户可以选择他希望看到的销售的不同工作室。

Filter 2 - Period: 这是他希望看到销售的时间。正是这个过滤器给了我这个问题。

基本上，周期的选择不会随AJAX请求一起发送，因此对图表没有影响。句点的默认值（使用momentjs库设置）也与AJAX请求一致。这段时间的变化不会被添加到请求中。

没有错误信息。

守则：

$(document).ready(function(){

var btnStudiosDiv = $('#btnStudios');

var getStudios = function () 
// Get all studio's from buttons with .active class               
var studios = $('button.active', btnStudiosDiv).map(function () {
    return $(this).val();
}).get();

// If no studio's found, get studio's from any button.
if (!studios || studios.length <= 0) {
    studios = $('button', btnStudiosDiv).map(function () {
        return $(this).val();
    }).get();
}

return studios;
};



var periodFrom = (moment().format('WW')-11)
var periodTo = moment().format('WW')
var output = {};

var show = function (studios) {
output['Studios'] = studios,

var per = {Period: {"From":["W" + periodFrom],"To":["W" + periodTo]}};
$.extend(output, per);
$('.list').html(JSON.stringify(output)); //Display Json Object on the Webpage

$.ajax({  //Ajax call to send the Json string to the server

        type: "POST", 
        data: {"jsontring": JSON.stringify(output)},
        url: "http://localhost:8080/salesvolume" ,
        contentType: "application/json",
        dataType: "json",
        cache: false,
        beforeSend: function() {
        $('#container').html("<img class = 'ajload' src='loading.gif' />");
         },

        success: function(data){
                                alert(  )   ;
                                $('#container').highcharts(data);
                                },
        error: function() {
                            alert("Something is not OK :(") 
                                },

        }); 





};

var timer; //To create a time delay of 2 Secs for every selection
$(".btn").click(function () {


$(this).toggleClass('active');
// Fetch studios
var studios = getStudios();


// Remove previous timeOut if it hasn't executed yet.

if(timer)
    clearTimeout(timer);

// Wait 2 sec
timer = setTimeout(function () {
    // Fill list with the studios
    show(studios);
},2000);


});

// Show the json on page load
show(getStudios());






//Period Selector (Template used from http://jqueryui.com/datepicker/)
$(function() {
var startDate;
var endDate;  
var selectCurrentWeek = function() {
    window.setTimeout(function () {
        $('#weekpickerFrom').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
}

$('#weekpickerFrom').datepicker( {
  showOn: "button",
  buttonImage: "calendar2.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    showOtherMonths: false,
    selectOtherMonths: false,
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $('#weekpickerFrom').val(date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
        output.Period.From = (date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
        periodFrom = output.Period.From //Add Period from to the Json String
        if(timer)
        clearTimeout(timer);
        timer = window.setTimeout(function() {$('.list').html(JSON.stringify(output))},2000); //Display Json Object on the Webpage



        selectCurrentWeek();
    },
    beforeShow: function() {
        selectCurrentWeek();
    },
    beforeShowDay: function(date) {
        var cssClass = '';
        if(date >= startDate && date <= endDate)
            cssClass = 'ui-datepicker-current-day';
        return [true, cssClass];
    },
    onChangeMonthYear: function(year, month, inst) {
        selectCurrentWeek();
    }
}).datepicker('widget').addClass('ui-weekpickerFrom');




$('.ui-weekpickerFrom .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpickerFrom .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});

$(function() {
var startDate;
var endDate;  
var selectCurrentWeek = function() {
    window.setTimeout(function () {
        $('#weekpickerTo').datepicker('widget').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
}

$('#weekpickerTo').datepicker( {
    showOn: "button",
    buttonImage: "calendar2.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    showOtherMonths: false,
    selectOtherMonths: false,
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $('#weekpickerTo').val(date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
        output.Period.To = (date.getFullYear() + '/W'+$.datepicker.iso8601Week(new Date(dateText)));
        periodTo = output.Period.From //Add Period to to the Json String
        if(timer)
        clearTimeout(timer);
        timer = window.setTimeout(function() {$('.list').html(JSON.stringify(output))},2000); //Display Json Object on the Webpage


        selectCurrentWeek();
    },
    beforeShow: function() {
        selectCurrentWeek();
    },
    beforeShowDay: function(date) {
        var cssClass = '';
        if(date >= startDate && date <= endDate)
            cssClass = 'ui-datepicker-current-day';
        return [true, cssClass];
    },
    onChangeMonthYear: function(year, month, inst) {
        selectCurrentWeek();
    }
}).datepicker('widget').addClass('ui-weekpickerTo');

$('.ui-weekpickerTo .ui-datepicker-calendar tr').on('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpickerTo .ui-datepicker-calendar tr').on('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });


});





});

如果有人能指出我出错的地方，那将会非常有用。

Note:该工具上添加了多个其他过滤器，但为简单起见，我们刚刚提到了两个重要过滤器。

Answer 1

我认为数据应该是这样的

$.ajax({
        type: "POST", 
        **data: "{\"jsontring\":" + JSON.stringify(output) + "}",**
        url: "http://localhost:8080/salesvolume" ,
        contentType: "application/json",
        dataType: "json",
        cache: false,
        beforeSend: function() {
        $('#container').html("<img class = 'ajload' src='loading.gif' />");
         },

        success: function(data){
                                alert(  )   ;
                                $('#container').highcharts(data);
                                },
        error: function() {
                            alert("Something is not OK :(") 
                                },

        });

在您的Ajax请求中

Jquery：无法将Json对象添加到Ajax请求中

1 个答案: