Question

刚学习jquery \ ajax将非常感谢您的帮助！

我需要传递用户选择的日期范围（http://www.daterangepicker.com/）到PAGE.PHP页面进行过滤，并从PAGE.PHP返回数据。在用户选择数据范围后，如何在不提交按钮的情况下将日期范围值发送到PAGE.PHP？

非常感谢！我的代码是：

<input type="text" name="datefilter" value="" />    
<script type="text/javascript">
$(function() {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
      // alert("A new date range was chosen:");
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});
</script>

Answer 1

您可以使用输入更改事件并向服务器发送ajax请求，如下所示：

<强>使用Javascript：

$("#datefilter").change(function(e) {
    if(!this.value) return;
    var dates = this.value.split(" - ");
    $.post('page.php', {startDate: dates[0], endDate: dates[1]}, function(data) {
        //Show you data in the page
        console.log(data);
    });
});

<强> PHP：

$startDate = strtotime($_POST['startDate']);
$endDate = strtotime($_POST['endDate']);
//You can format the date using date($format, $startDate|$endDate);
//Make a query then echo the result that will be recieved by the ajax function

请注意，您必须验证$startDate/$endDate。

我希望这会对你有所帮助。

Answer 2

例如，您可以执行以下操作：

$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
         $.ajax({
           method: "POST",
           url: "PAGE.PHP",
           data: {startDate: picker.startDate, endDate: picker.endDate}
        }).done(function(response){
            // Do something with response here
            console.log(response);
        }).fail(function (error) {
            // And handle errors here
            console.log(error);
        });
      });

不要忘记服务器端验证和CSRF保护。

Daterangepicker，将数据范围传递给page.php

2 个答案: