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")&nbsp; .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>");&nbsp;&nbsp;$.ajax({&nbsp; url: "path/to/students/endpoint",&nbsp; dataType: "json", //assuming you return json from you php script}).done(function (students){&nbsp; //assuming students is an array of names&nbsp; var select = form.find('select[name=students]');&nbsp; for(var name of students) {&nbsp; &nbsp; select.append($("<option></option>", {&nbsp; &nbsp; &nbsp; value: name,&nbsp; &nbsp; &nbsp; text: name&nbsp; &nbsp; }))&nbsp; }})//Since this is an example and I cant actually make an ajax callfunction fakeAjaxResponse(students) {&nbsp; var select = form.find('select[name=students]');&nbsp; for(var name of students) {&nbsp; &nbsp; select.append($("<option></option>", {&nbsp; &nbsp; &nbsp; value: name,&nbsp; &nbsp; &nbsp; text: name&nbsp; &nbsp; }))&nbsp; }}fakeAjaxResponse([&nbsp; "StudentA",&nbsp; "StudentB"])<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>