0
Overview:我正在制作一个Web工具，可以显示不同工作室在数字平台上使用图表（Highcharts）销售的电影总数。这些图表是动态的，因此用户可以使用过滤器列表来更改结果。Jquery：无法将Json对象添加到Ajax请求
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:工具上还添加了多个其他过滤器，但为了简单起见，1刚刚提到了两个重要的过滤器。
那么，什么是 '输出' 看起来像你的$ .extend后（）？它有正确的数据和格式吗？如果是这样，接收机呢？它解析正确吗？ – jlbriggs
您是否尝试过使用：$ .post（“url”，{jsontring：JSON.stringify（output）}，function（data）{ // action with data console.log（data）; }，“json “）; –