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();        });

Answer 1

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

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>