PHPを使用してJavascriptからMySQLにデータを挿入します。

Question

日時の付いたカレンダーがあります。ユーザは、利用可能な日時を選択することができる。その情報をデータベースに保存する。現時点では、ユーザが例えば月曜日の08:00から10:00までを選択すると、データベース上に1スロット当たり1行を保存します。

私が何をしたいのか、一つだけの行（最終行）を保存することです。それらのすべての代わりに。だから基本的に、私はクリックしてから情報を保存する必要があります。私はそれを達成する方法を本当に知らない。

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, endAux; 
    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'); 
    } 

$.ajax({ 
    url: "/Member/test.php", 
    dataType:"json", 
    type: "POST", 
    data: { 
    day, 
    start, 
    end 
    } 

}).success(function(weekDay, startTime, endTime) { 
    console.log(weekDay); 
    console.log(startTime); 
    console.log(endTime); 
}).error(function(error) { 
    console.log("error:", error); 
}) 
    }); 
    }; 

そして、これは私がデータベース内の情報を保存するPHPである：これは、これまでのコードである

<?php 
include 'connection.php'; 
session_start(); 
$raw_json = json_encode($_POST); 
if($raw_json != "[]"){ 
$sql = "INSERT INTO Users (day) VALUES ('$raw_json')"; 

if ($conn->query($sql) === TRUE) { 
     echo "New record created successfully"; 
} else { 
     echo "Error: " . $sql . "<br>" . $conn->error; 
} 
} 
?> 

任意の助けが理解されるであろう。ありがとう。

Answer 1

あなたは.time-slot要素（カレンダーのそれらの矩形のおそらく1）の各mouseover上のサーバーに要求を行っている：あなたは10に0800 AMとドラッグで開始した場合ので

this.$el.on('mouseover', '.time-slot', function() {

：00 AMユーザが.time-slot要素の上を移動するたびにmouseoverイベントがトリガされ、複数のクエリが実行されます。 mouseupイベントを使用して、最後の.time-slotが何であるかを確認することをお勧めします。あなたがDayScheduleSelector、プラグインfires an eventを使用しているとして選択が行われた後

mouseover: 
    lastSlot = element hovered over 

mouseup: 
    send request to server with lastSlot 

を見て：

トリガー

selected.artsy.dayScheduleSelector

、このようなものである擬似コードで

選択が行われます。イベントと選択されたタイムスロットの配列をイベントハンドラに渡します。

$("#weekly-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) { 
    /* selected is an array of time slots selected this time. */ 
    /* pop the last element of selected and execute your request */ 
} 

あなただけの最後に選択したエントリ、pop it offselected配列をしたい場合は、それに要求を送信します。これは正確な実装ではありませんが、これはあなたのニーズに合わせるのに十分なポインタを与えるはずです。

補足として、あなたの現在のクエリはMySQL注入の影響を受けやすいです。読む：How can I prevent SQL-injection in PHP?。あなたのコードもフォーマットが間違っていて、はっきりしていないので、最初に人を助けてくれる人に動機づけるものではありません。便利なヘルプを提供するよりも、コードが何をしているかを理解するのに時間がかかります（そうではありません）。