【发布时间】：2016-09-05 18:48:13
【问题描述】：
我正在尝试向我的 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');
}
});
};
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>
所做的更改
作为建议，我尝试使用 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'
}
})
});
【问题讨论】：
标签： javascript php mysql