将变量从javascript传递到php文件，并在

我正在尝试向我的web应用程序添加新功能。我希望用户能够选择日期和时间，他们可以实际工作。为此，我创建了一个日历，可以在其中选择可用的日期和时间。在日历中，他们可以选择不同的时间间隔。直到这里一切都很好。现在我需要将这些信息添加到数据库中。为此，我理解必须将值传递到.php文件，以便将它们保存在数据库中。问题是如何将该值传递给php文件。在那之后，如何将它们添加到数据库中，我想这不会是一个问题。但是，如何将所选值发送到php文件，以便保存该信息

任何帮助都将不胜感激。 谢谢

JS

function isSlotSelected($slot) { return $slot.is('[data-selected]'); 
function isSlotSelecting($slot) { return $slot.is('[data-selecting]'); }

/**
 * Get the selected time slots given a starting and a ending slot
 * @private
 * @returns {Array} An array of selected time slots
 */
function getSelection(plugin, $a, $b) {
var $slots, small, large, temp;
if (!$a.hasClass('time-slot') || !$b.hasClass('time-slot') ||
    ($a.data('day') != $b.data('day'))) { return []; }
$slots = plugin.$el.find('.time-slot[data-day="' + $a.data('day') + '"]');
small = $slots.index($a); large = $slots.index($b);
if (small > large) { temp = small; small = large; large = temp; }
return $slots.slice(small, large + 1);
}

DayScheduleSelector.prototype.attachEvents = function () {
var plugin = this
  , options = this.options
  , $slots;

this.$el.on('click', '.time-slot', function () {
  var day = $(this).data('day');
  if (!plugin.isSelecting()) {  // if we are not in selecting mode
    if (isSlotSelected($(this))) { plugin.deselect($(this)); }
    else {  // then start selecting
      plugin.$selectingStart = $(this);
      $(this).attr('data-selecting', 'selecting');
      plugin.$el.find('.time-slot').attr('data-disabled', 'disabled');
      plugin.$el.find('.time-slot[data-day="' + day + '"]').removeAttr('data-disabled');
    }
  } else {  // if we are in selecting mode
    if (day == plugin.$selectingStart.data('day')) {  // if clicking on the same day column
      // then end of selection
      plugin.$el.find('.time-slot[data-day="' + day + '"]').filter('[data-selecting]')
        .attr('data-selected', 'selected').removeAttr('data-selecting');
      plugin.$el.find('.time-slot').removeAttr('data-disabled');
      plugin.$el.trigger('selected.artsy.dayScheduleSelector', [getSelection(plugin, plugin.$selectingStart, $(this))]);
      plugin.$selectingStart = null;
    }
  }
  });

this.$el.on('mouseover', '.time-slot', function () {
  var $slots, day, start, end, temp;
  if (plugin.isSelecting()) {  // if we are in selecting mode
    day = plugin.$selectingStart.data('day');
    $slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
    $slots.filter('[data-selecting]').removeAttr('data-selecting');
    start = $slots.index(plugin.$selectingStart);
    end = $slots.index(this);
    if (end < 0) return;  // not hovering on the same column
    if (start > end) { temp = start; start = end; end = temp; }
    $slots.slice(start, end + 1).attr('data-selecting', 'selecting');
  }
});
};

函数isSlotSelected（$slot）{return$slot.is（'[dataselected]'）；
函数isSlotSelecting（$slot）{返回$slot.is（'[data selecting]'）；}
/**
*获取给定起始和结束时隙的选定时隙
*@私人
*@返回{Array}选定时隙的数组
*/
函数getSelection（插件，$a，$b）{
var$插槽，小型、大型、临时；
if（！$a.hasClass（'time-slot'）| |！$b.hasClass（'time-slot'））||
（$a.data（'day'）！=$b.data（'day'））{return[]；}
$slots=plugin.$el.find（'.time slot[data day=“'+$a.data（'day'）+'”）；
小=$slots.index（$a）；大=$slots.index（$b）；
如果（小>大）{temp=small；小=large；大=temp；}
返回$slots.slice（小、大+1）；
}
DayScheduleSelector.prototype.attachEvents=函数（）{
var plugin=this
，options=this.options
，$slots；
此.el.on（'click'，'time slot'，函数（）{
var day=$（this.data（'day'）；
如果（！plugin.isSelecting（））{//如果我们没有处于选择模式
if（isSlotSelected（$（this））{plugin.disselect（$（this））；}
else{//然后开始选择
插件。$selectingStart=$（此）；
$（this.attr（'data-selecting'，'selecting'）；
plugin.$el.find（'.time slot'）.attr（'data-disabled'，'disabled'）；
plugin.$el.find（'.time slot[data day=“'+day+''“]”）。removeAttr（'data-disabled'）；
}
}否则{//如果我们处于选择模式
if（day==plugin.$selectingStart.data（'day'））{//if单击同一天列
//然后选择结束
plugin.$el.find（'.time slot[data day=“'+day+''“]”）过滤器（'[data selecting]'））
.attr（'data-selected'，'selected'）。removeAttr（'data-selection'）；
plugin.$el.find（'.time slot'）.removeAttr（'data-disabled'）；
plugin.el.trigger（'selected.artsy.dayScheduleSelector'，[getSelection（plugin，plugin.selectionstart，$（this）））；
插件。$selectingStart=null；
}
}
});
此.el.on（'mouseover'，'time slot'，函数（）{
var$插槽、日期、开始、结束、温度；
如果（plugin.isselection（））{//如果我们处于选择模式
day=插件。$selectingStart.data（'day'）；
$slots=plugin.$el.find（'.time slot[data day=“'+day+'”）；
$slots.filter（'[数据选择]）.removeAttr（'数据选择'）；
start=$slots.index（plugin.$selectingStart）；
end=$slots.index（此）；
if（end<0）return；//不在同一列上悬停
如果（开始>结束）{temp=start；开始=end；结束=temp；}
$slots.slice（开始、结束+1）.attr（'data-selecting'，'selecting'）；
}
});
};

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body { font-family:'roboto'; background-color:#ECF0F1; }
</style>
</head>
<body>
<h1 style="margin:150px auto 30px auto;"></h1>
<div id="day-schedule"></div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../src/index.js"></script>
<script>
(function ($) {
  $("#day-schedule").dayScheduleSelector({
  });
  $("#day-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) {
    console.log(selected);
  })
})($);
</script>
</body>
</html>

正文{字体系列：'roboto'；背景色：#ECF0F1；}
（函数（$）{
$（“#日计划”）.dayScheduleSelector({
});
$（“#日计划”）.on（'selected.artsy.dayScheduleSelector'，函数（e，selected）{
console.log（选中）；
})
})($);

所做的更改

作为建议，我正在尝试使用Ajax函数，并告诉我要传递哪些参数，以及要接收这些参数的文件

这是零钱。谢谢

    this.$el.on('mouseover', '.time-slot', function () {
    var $slots, day, start, end, temp;
    if (plugin.isSelecting()) {  // if we are in selecting mode
      day = plugin.$selectingStart.data('day');
      $slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
      $slots.filter('[data-selecting]').removeAttr('data-selecting');
      start = $slots.index(plugin.$selectingStart);
      end = $slots.index(this);
    if (end < 0) return;  // not hovering on the same column
    if (start > end) { temp = start; start = end; end = temp; }
      $slots.slice(start, end + 1).attr('data-selecting', 'selecting');
    }
    console.log(day);
    $.ajax({
     url:   "/Member/test.php",
     dataType:"json",
     type:  "POST",
    data:  {
     weekDay: 'day',
     start: 'start',
     end:   'end'
  }
})
});

this.$el.on（'mouseover'，'time slot'，函数（）{
var$插槽、日期、开始、结束、温度；
如果（plugin.isselection（））{//如果我们处于选择模式
day=插件。$selectingStart.data（'day'）；
$slots=plugin.$el.find（'.time slot[data day=“'+day+'”）；
$slots.filter（'[数据选择]）.removeAttr（'数据选择'）；
start=$slots.index（plugin.$selectingStart）；
end=$slots.index（此）；
if（end<0）return；//不在同一列上悬停
如果（开始>结束）{temp=start；开始=end；结束=temp；}
$slots.slice（开始、结束+1）.attr（'data-selecting'，'selecting'）；
}
控制台日志（天）；
$.ajax({
url:“/Member/test.php”，
数据类型：“json”，
类型：“POST”，
数据：{
工作日：'天'，
开始：“开始”，
结束：'结束'
}
})
});

使用Ajax或者您可以使用Ajax将输入打包到php脚本中，或者使用Ajax或者您可以使用

将输入打包到php脚本中，然后使用Ajax调用将输入打包到php脚本中，然后在php脚本中通过$\u post数组访问参数，即：

> 要发布到php脚本的代码（在JS文件中插入代码）：

在/htdoc/subdirectory/model.php中访问从JS传递的参数的代码：

<?php
  var_dump($_POST);
?>

---

执行JS应该会在浏览器的日志中显示三个示例参数。对于db，您将不使用vardumping$\u POST，而是向php脚本中添加代码，将变量写入db。

使用AJAX调用向php脚本中发布，然后在php脚本中通过$\u POST数组访问参数，即：

要发布到php脚本的代码（在JS文件中插入代码）：

在/htdoc/subdirectory/model.php中访问从JS传递的参数的代码：

<?php
  var_dump($_POST);
?>

执行JS应该会在浏览器的日志中显示三个示例参数