PHP를 사용하여 Javascript에서 MySQL로 데이터를 삽입하십시오.

Question

요일과 시간이있는 달력이 있습니다. 그리고 사용자는 그가 이용할 수있는 요일과 시간을 선택할 수 있습니다. 그 정보를 데이터베이스에 저장합니다. 현재 사용자가 월요일 08:00에서 10:00까지를 선택하면 데이터베이스 당 슬롯 당 한 줄을 저장합니다.

내가 원하는 무엇

만 한 줄 (마지막 줄)를 저장하는 것입니다. 그들 모두의 대신에. 따라서 기본적으로 클릭하여 정보를 저장해야합니다. 나는 그것을 어떻게 달성해야하는지 정말로 모른다. 이것은 지금까지 코드 :

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 요소 (달력에서 그 사각형의 아마 하나)의 각 mouseover에 서버에 요청을하고있다 : 10 당신이 0800 오전에 시작한다면

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

드래그 : 00:00 사용자가 .time-slot 요소를 가리킬 때마다 mouseover 이벤트가 트리거되어 여러 쿼리가 실행됩니다. mouseup 이벤트를 사용하고 마지막으로 .time-slot이 무엇인지 확인하십시오. 이 같은 사이비 - 코드에서

입니다 : 당신이 DayScheduleSelector 사용으로

mouseover: 
    lastSlot = element hovered over 

mouseup: 
    send request to server with lastSlot 

보고, 선택 후 플러그인 fires an event가 구성됩니다 때

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 off selected 배열하고 그것에게 요청을 보냅니다. 이는 정확한 구현은 아니지만 필요한 경우이를 적용 할 수있는 충분한 지침을 제공해야합니다.

참고로, 현재 쿼리는 MySQL 삽입에 취약합니다. 읽으십시오 : How can I prevent SQL-injection in PHP?. 코드도 형식이 틀리거나 명확하지 않으므로 처음부터 사람들을 도와 줄 동기가 없습니다. 유용한 도움말을 제공하는 것보다 코드가하는 것을 이해하는 데 더 많은 시간이 걸립니다 (아니라).