如何通过fullcalendar使用ajax将boostrap模式输入插入到sql表

ldxq2e6h  于 2021-08-09  发布在  Java
关注(0)|答案(2)|浏览(358)

我已经试了一段时间来让这个工作。我正在努力从模式中获取用户输入并将其插入phpmyadmin中的my数据库。任何帮助都将不胜感激。
1) 使用select回调,我调出一个模式:

select: function(start, end, allDay)
{
    $('#myModal').modal('show');
},

2) html中的模式本身:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Add Event</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <form>
               <div class="form-group">
                  <label for="FormControlInput1">Task Title</label>
                  <input type="text" class="form-control" id="title" placeholder="Enter Task Title">
               </div>
               <div class="form-group">
                  <label for="FormControlInput2">Task Number</label>
                  <input type="text" class="form-control" id="number" placeholder="Enter Task Number>
               </div>
               <div class="form-group">
                  <label for="FormControlInput3">Location</label>
                  <input type="text" class="form-control" id="location" placeholder="Enter Location">
               </div>
               <div class="form-group">
                  <label for="FormControlTextarea1">Tooling Required</label>
                  <textarea class="form-control" id="tooling" placeholder="Enter the tools required for the task here" rows="3"></textarea>
               </div>
               <div class="form-group">
                  <label for="FormControlTextarea2">Consumables</label>
                  <textarea class="form-control" id="consumables" placeholder="Enter the consumables required for the task here" rows="3"></textarea>
               </div>
               <div class="form-group">
                  <label for="FormControlSelect1">Safety Condition</label>
                  <select class="form-control" id="safety">
                     <option>0</option>
                     <option>1</option>
                     <option>2</option>
                     <option>3</option>
                     <option>4</option>
                  </select>
               </div>
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="buttonAddEvent">Add Event</button>
         </div>
      </div>
   </div>
</div>

3) 此时,我想使用我制作的insert.php文件,该文件适用于代码中的其他函数:

<?php

//insert.php

$connect = new PDO('mysql:host=hostname;dbname=dbname', 'username', 'password');

if(isset($_POST["title"]))
{
 $query = "
 INSERT INTO events
 (title, number, location, tooling, consumables, safety, start_event, end_event)
 VALUES (:title, :number, :location, :tooling, :consumables, :safety, :start_event, :end_event)
 ";
 $statement = $connect->prepare($query);
 $statement->execute(
  array(
   ':title' => $_POST['title'],
   ':number' => $_POST['number'],
   ':location' => $_POST['location'],
   ':tooling' => $_POST['tooling'],
   ':consumables' => $_POST['consumables'],
   ':safety' => $_POST['safety'],
   ':start_event' => $_POST['start'],
   ':end_event' => $_POST['end']
  )
 );
}

?>

我通常使用以下代码插入数据,但是这会使用prompts(),我想用模式输入替换它:

select: function(start, end, allDay)
{
 var title = prompt("Enter Task Title");
 if(title)
 {
  var number = prompt("Enter Task Number");
  var location = prompt("Enter Train Location");
  var tooling = prompt("Enter Tooling Required");
  var consumables = prompt("Enter Consumables Required");
  var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
  var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
  $.ajax({
   url:"insert.php",
   type:"POST",
   data:{title:title, number:number, location:location, tooling:tooling, consumables:consumables, start:start, end:end},
   success:function()
   {
    calendar.fullCalendar('refetchEvents');
   }
  })
 }
},
dly7yett

dly7yett1#

需要使用.on()将数据从模式输入传递到变量

select: function(start, end, allDay)
{
  var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
  var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
  $('#myModal').modal('show')
  $('#buttonAddEvent').on('click', function (){
    var title = $("#myModal #title").val().trim();
    var number = $("#myModal #number").val().trim();
    var location = $("#myModal #location").val().trim();
    var tooling = $("#myModal #tooling").val().trim();
    var consumables = $("#myModal #consumables").val().trim();
    var safety = $("#myModal #safety").val().trim();
    var mockEvent = {title:title, number:number, location:location, tooling:tooling, consumables:consumables, safety:safety, start:start, end:end};
    $('#calendar').fullCalendar('renderEvent', mockEvent);
    $('#buttonAddEvent').unbind('click');
    $('#myModal').modal('hide');
    $.ajax({
     url:"insert.php",
     type:"POST",
     data:{title:title, number:number, location:location, tooling:tooling, consumables:consumables, safety:safety, start:start, end:end},
     success:function()
     {
        calendar.fullCalendar('refetchEvents');
     }
   });
  });
},

感谢@adyson指出了正确的方向。

qf9go6mv

qf9go6mv2#

我没有看到任何来自php代码的返回数据(通常是get new updated record并以json\u encode的形式返回),然后ajax success函数应该处理响应数据并将其获取到calendar

相关问题