- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有从数据库返回的数据,我使用 Chartjs 将它们显示在饼图上。
我希望用户选择特定的日期范围,当她单击过滤器时,它应该根据用户选择的日期在饼图上显示数据,live demo
这是我的解决方案。
HTML
from <input type="text" id = "firstdatepicker" name = "firstdatepicker">
to <input type="text" id = "lastdatepicker" name = "lastdatepicker">
<input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />
JS
$(document).ready(function(){
$(function() {
$( "#firstdatepicker" ).datepicker();
$( "#lastdatepicker").datepicker();
});
$('#filter').click(function(){
var from_date =$('#firstdatepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
var to_date =$('#lastdatepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
if(from_date != '' && to_date != ''){
$.ajax({
url:"https://meed.audiencevideo.com/admin/chats/stats.php",
type:"POST",
data:{from_date:from_date, to_date:to_date},
success:function(data){
console.log(data);
var session= data[0].sessions;
var yes = data[0].num_yes;
var no =data[0].num_no;
var ctx = document.getElementById("myPieChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["sessions","yes", "no"],
datasets: [{
label: 'Genders',
data: [session,yes, no],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
});
},
error: function () {
console.log('Something went wrong');
}
});
}
else
{
alert("Please Select Date");
}
});
})
这是从数据库中获取数据的php
if (isset($_POST['from_date']) && isset($_POST['to_date'])) {
$firstDate= $_POST['from_date'];
$lastDate= $_POST['to_date'];
$firstDate_new = date('Y-m-d', strtotime($firstDate));
$lastDate_new = date('Y-m-d', strtotime($lastDate));
$query = sprintf("SELECT count(*) as num_rows, datetime, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events WHERE datetime BETWEEN '{$firstDate_new}' AND '{$lastDate_new}'");
var_dump($query);
$result = $mysqli->query($query);
$data = [];
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_array($result))
{
$data[] = $row;
}
}
echo json_encode($data);
exit;
}else{
//query to get data from the table
$query = sprintf("SELECT count(*) as num_rows, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events;");
}
$result = $mysqli->query($query);
//loop through the returned data
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
//free memory associated with result
$result->close();
//close connection
$mysqli->close();
//now print the data
print json_encode($data);
当我选择日期范围并单击过滤器时,我会在这样的控制台上获得所需的数据。
"SELECT count(*) as num_rows, datetime, count(distinct sid) as sessions, sum( targetbuttonname = 'yes' ) as num_yes, sum( targetbuttonname = 'no' ) as num_no from events WHERE datetime BETWEEN '2019-08-13' AND '2019-08-14'"
[
{
"0":"12",
"num_rows":"12",
"1":"2019-08-14",
"datetime":"2019-08-14",
"2":"12",
"sessions":"12",
"3":"2",
"num_yes":"2",
"4":"4",
"num_no":"4"
}
]
我从 ajax 中收到错误出了点问题
。当我尝试从 POST
更改为 GET
时,会显示数据,但旧数据。
我的代码做错了什么?
最佳答案
用下面的代码改变你的ajax部分
$(document).ready(function(){
$(function() {
$( "#firstdatepicker" ).datepicker();
$( "#lastdatepicker").datepicker();
});
$('#filter').click(function(){
var from_date =$('#firstdatepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
var to_date =$('#lastdatepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
if(from_date != '' && to_date != ''){
$.ajax({
url:"https://meed.audiencevideo.com/admin/chats/stats.php",
type:"POST",
dataType:"json",
data: {
from_date: from_date,
to_date: to_date
},
success:function(data){
console.log(data);
var session= data[0].sessions;
var yes = data[0].num_yes;
var no =data[0].num_no;
var ctx = document.getElementById("myPieChart");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["sessions","yes", "no"],
datasets: [{
label: 'Genders',
data: [session,yes, no],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}]
},
});
},
error: function () {
console.log('Something went wrong');
}
});
} else {
alert("Please Select Date");
}
});
});
关于javascript - PHP 和 Ajax : using post ajax return error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57494100/
reqwest v0.9 将 serde v1.0 作为依赖项,因此实现 converting serde_json errors into reqwest error . 在我的代码中,我使用 se
我有这个代码: let file = FileStorage { // ... }; file.write("Test", bytes.as_ref()) .map_err(|e| Mu
我只是尝试用angular-cli创建一个新项目,然后运行服务器,但是它停止并显示一条有趣的消息:Error: No errors。 我以这种方式更新了(希望有帮助):npm uninstall -g
我从我的 javascript 发送交易 Metamask 打开传输对话框 我确定 i get an error message in metamask (inpage.js:1 MetaMask -
这个问题在这里已经有了答案: How do you define custom `Error` types in Rust? (3 个答案) How to get a reference to a
我想知道两者之间有什么大的区别 if let error = error{} vs if error != nil?或者只是人们的不同之处,比如他们如何用代码表达自己? 例如,如果我使用这段代码: u
当我尝试发送超过 50KB 的图像时,我在 Blazor 服务器应用程序上收到以下错误消息 Error: Connection disconnected with error 'Error: Serv
我有一个error-page指令,它将所有异常重定向到错误显示页面 我的web.xml: [...] java.lang.Exception /vi
我有这样的对象: address: { "phone" : 888, "value" : 12 } 在 WHERE 中我需要通过 address.value 查找对象,但是在 SQL 中有函数
每次我尝试编译我的代码时,我都会遇到大量错误。这不是我的代码的问题,因为它在另一台计算机上工作得很好。我尝试重新安装和修复,但这没有帮助。这是整个错误消息: 1>------ Build starte
在我的代码的类部分,如果我写一个错误,则在不应该的情况下,将有几行报告为错误。我将'| error'放在可以从错误中恢复的良好/安全位置,但是我认为它没有使用它。也许它试图在某个地方恢复中间表情? 有
我遇到了 csv 输入文件整体读取故障的问题,我可以通过在 read_csv 函数中添加 "error_bad_lines=False" 来删除这些问题来解决这个问题。 但是我需要报告这些造成问题的文
在 Spring 中,验证后我们在 controller 中得到一个 BindingResult 对象。 很简单,如果我收到验证错误,我想重新显示我的表单,并在每个受影响的字段上方显示错误消息。 因此
我不知道出了什么问题,因为我用 Java 编程了大约一年,从来没有遇到过这个错误。在一分钟前在 Eclipse 中编译和运行工作,现在我得到这个错误: #A fatal error has been
SELECT to_char(messages. TIME, 'YYYY/MM/DD') AS FullDate, to_char(messages. TIME, 'MM/DD
我收到这些错误: AnonymousPath\Anonymized.vb : error BC30037: Character is not valid. AnonymousPath\Anonymiz
我刚刚安装了 gridengine 并在执行 qstat 时出现错误: error: commlib error: got select error (Connection refused) erro
嗨,我正在学习 PHP,我从 CRUD 系统开始,我在 Windows 上安装了 WAMP 服务器,当我运行它时,我收到以下错误消息。 SCREAM: Error suppression ignore
我刚刚开始一个新项目,我正在学习核心数据教程,可以找到:https://www.youtube.com/watch?v=zZJpsszfTHM 我似乎无法弄清楚为什么会抛出此错误。我有一个名为“Exp
当我使用 Jenkins 运行新构建时,出现以下错误: "FilePathY\XXX.cpp : fatal error C1853: 'FilePathZ\XXX.pch' precompiled
我是一名优秀的程序员,十分优秀!