Javascript Ajax调用改变MySQL选择查询

我正在开发一个网络应用程序来跟踪最近的开支。我希望用户能够选择4个不同的时间段，显示不同的数据。当用户第一次登陆页面时，默认情况下会显示“总体”数据。当用户选择一个范围时，我希望使用ajax调用获取数据范围并更改mysql查询。我对ajax的经验不多，我很好奇如何做到这一点

这是我的HTML（在PHP中重复）：

---

这是进行这一过程的正确方式吗？或者除了ajax还有更好的方法吗？任何帮助都将不胜感激

queryMysql

是一个可怕的函数。这意味着什么？警告：这有一些严重的问题，因为查询中使用了

$\u GET

数据。尽可能使用事先准备好的陈述。在任何用户提供的数据都指定有

？

或

：name

指示符的情况下，这些操作非常简单，稍后将根据您使用的是哪个指示符，使用

绑定参数或
执行
填充指示符。千万不要把
$\u POST
或
$\u GET
数据直接放在你的查询中。塔德曼：我更新了查询以使用pdo语句。你几乎做到了。如果要将某个内容绑定到占位符，则无需对其进行“清理”。如果您想验证的是正确的日期，而不是垃圾数据，但放入垃圾不应该是安全问题。
echo "<section class='range-container'>" .
         "<ul class='overview-range'>" .
             "<li data-range='overall'>Overall</li>" .
             "<li data-range='$currentYear'>Year</li>" .
             "<li data-range='$currentMonth'>Month</li>" .
             "<li data-range='$currentDay'>Day</li>" .
         "</ul>" .
     "</section>";

include $_SERVER['DOCUMENT_ROOT'] . '/ajax/overview.php'; 

<?php   

if ($_POST['range']) {
    $currentTime = $_POST['range'];
} else {
    $currentTime = '0';
}

//Overview Query
$sqloverview = $db->prepare('SELECT SUM(amount), trans_type
               FROM transactions
               WHERE (amount > 0 AND DAY(date) = :currentTime) OR
               amount > 0
               GROUP BY trans_type
               ORDER BY trans_type DESC');
$sqloverview->execute(array(':currentTime' => sanitizeString($currentTime)));
$overviewRows = $sqloverview->num_rows;

?>

$('.overview-range li').click(function() {
    var range = $(this).attr('data-range');

    $.ajax({
      type: 'POST',
      url:  '/ajax/overview.php',
      data: { range: range },
      error: function() { alert("Unable to process this request."); },
      success: function() {
         alert('It was successful');
     }
    });
});