如何通过 fullcalendar 使用 AJAX 将引导模式输入插入到 SQL 表中

Posted 2023-03-23

【中文标题】如何通过 fullcalendar 使用 AJAX 将引导模式输入插入到 SQL 表中

【英文标题】：How to take boostrap modal inputs to insert to SQL table using AJAX through fullcalendar

【发布时间】：2020-05-18 14:18:36

【问题描述】：

我已经尝试了一段时间来使其正常工作。我正在努力从模式中获取用户输入并将其插入到我在 phpmyadmin 中的数据库中。任何帮助将不胜感激。

1) 使用选择回调我调出一个模态：

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

【问题讨论】：

“挣扎”究竟是什么意思？目前尚不清楚您卡在哪里，或者您面临什么错误/问题。请说明具体问题。

看来您仍然需要 a) 为开始日期和结束日期添加模式文本框，并使用从 fullCalendar 中选择的开始日期和结束日期填充这些文本框，然后 b) 处理表单的提交- 我猜你想为此使用 AJAX？如果是这样，您需要在表单上设置一个“提交”事件处理程序（您可能需要为表单提供一个 ID 以便您可以识别它），序列化表单数据并通过 AJAX 将其发送到 insert.php。如果成功，则重新获取日历上的事件。这有帮助吗？

【参考方案1】：

需要使用 .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 指出正确的方向。

【讨论】：

很高兴你能解决它。只是一点：您应该使用.off() 而不是.unbind()。 .off 与 .on 正好相反。在某些情况下， unbind 的行为可能略有不同。见api.jquery.com/off

【参考方案2】：

我没有从您的 php 代码中看到任何返回数据（通常是获取新更新的记录并返回为 json_encode）， 然后 Ajax Success Function 应该处理响应数据并将其提取到日历

【讨论】：

calendar.fullCalendar('refetchEvents'); 已经解决了这个问题（参见第二个 ajax 示例）。这不太可能是问题。

@ADyson 对不起，我的错。新手在这里，不能对问题发表评论，只是回答:)

回答很好，但我只是指出我认为这不是正确的答案。