JS .append 来自 PHP 结果 - FullCalendar

Question

我正在学习使用 JS，我正在使用 PHP 实现 fullCalendar。

到目前为止一切顺利，基本功能正常运行：从 PHP + MySQL 提取/存储/更新...一切顺利！

现在的问题是我想用从数据库中提取的 PHP 数据填充下拉菜单 [Students]，其中 JS 构建了一个模式，我认为应该是 AJAX ，但我想不通。

在当前代码下面，除了下拉起点和附上图片外，没有添加任何东西。提前致谢：

    /* on select */
CalendarApp.prototype.onSelect = function (start, end, allDay) {
    var $this = this;
        $this.$modal.modal({
            backdrop: 'static'
        });
        var form = $("<form></form>");
        form.append("<div class='row'></div>");
        form.find(".row")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>")
            .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Students</label><select class='form-control' name='students'></select></div></div>")
            .find("select[name='category']")
            .append("<option value='bg-danger'>Danger</option>")
            .append("<option value='bg-success'>Success</option>")
            .append("<option value='bg-purple'>Purple</option>")
            .append("<option value='bg-primary'>Primary</option>")
            .append("<option value='bg-pink'>Pink</option>")
            .append("<option value='bg-info'>Info</option>")
            .append("<option value='bg-warning'>Warning</option></div></div>");
        $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body').empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
            form.submit();
        });
        $this.$modal.find('form').on('submit', function () {
            var title = form.find("input[name='title']").val();
            var beginning = form.find("input[name='beginning']").val();
            var ending = form.find("input[name='ending']").val();
            var categoryClass = form.find("select[name='category'] option:checked").val();
            if (title !== null && title.length != 0) { 
                $this.$modal.modal('hide');
                var theStart = moment(start).format();
                var theEnd = moment(end).format();
                var theData = {
                    title, 
                    theStart, 
                    theEnd,
                    categoryClass
                };
                sendData('add', theData);
            }
            else{
                Swal.fire("Enter the Event Name!");
            }
            return false;
            
        });
        $this.$calendarObj.fullCalendar('unselect');
},

Answer 1

对于 jQuery，您使用 ajax 函数。此函数使 http 请求在完成时调用回调。有多种回调和设置它们的方法，我建议你看看文档。在这种情况下我们使用 done，它只在请求成功时被调用。
为了在附加选项时避免字符串插值，我使用第二个 attributes 参数来设置值和文本。

var form = $("<form></form>");
$("body").append(form)
form.append("<div class='row'></div>");
form.find(".row")
  .append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Students</label><select class='form-control' name='students'></select></div></div>");
  
$.ajax({
  url: "path/to/students/endpoint",
  dataType: "json", //assuming you return json from you php script
}).done(function (students){
  //assuming students is an array of names
  var select = form.find('select[name=students]');
  for(var name of students) {
    select.append($("<option></option>", {
      value: name,
      text: name
    }))
  }
})



//Since this is an example and I cant actually make an ajax call
function fakeAjaxResponse(students) {
  var select = form.find('select[name=students]');
  for(var name of students) {
    select.append($("<option></option>", {
      value: name,
      text: name
    }))
  }
}

fakeAjaxResponse([
  "StudentA",
  "StudentB"
])

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JS .append 来自 PHP 结果 - FullCalendar

JS .append from PHP Result - FullCalendar

javascript

ajax

jquery

modal-dialog

fullcalendar