Question

大家好，谢谢，

简而言之，我正在使用一个插件来动态填充选择选项，并尝试通过ajax调用来实现它，但是在ajax完成之前创建选择时，我一直在努力将数据放入选择中。

首先，我有一个可以设置不同选择的插件。 options输入可以接受数组或对象，并为选择创建<option> html。还设置了createModal代码以处理为options输入提供的功能。下面的示例；

$('#modalAccounts').createModal({
    {
        component: 'select',
        options: function () {
            let dueDate = {};
                for (let i = 1; i < 32; i++) {
                    dueDate[i] = i;
                }
            return dueDate;
        }
    }
});

我想做的是通过AJAX为options输入提供一个对象。我有一个名为postFind的插件，可以协调ajax调用。诸如数据库，集合之类的项目将传递给ajax调用。使用onSuccess选项传递应在ajax调用后执行的功能。

(function ($) {
    $.extend({
        postFind: function () {
            var options = $.extend(true, {
                onSuccess: function () {}
            }, arguments[0] || {});
            options.data['action'] = 'find';
            $.ajax({
                url: "../php/ajax.php",
                type: "POST",
                data: options.data,
                statusCode: {
                    404: function () {
                        alert("Page not found");
                    }
                },
                success: function (result) {
                    var obj = $.parseJSON(result);
                    if (obj.success) {
                        if (typeof options.onSuccess === 'function') {
                            options.onSuccess.call(this, obj);
                        }
                    }
                },
                error: function (xhr, text, err) {
                    console.log(err);
                }
            });
        }
    });
}(jQuery));

该插件工作正常，因为当我查看输出时，它就是我期望的数据。以下是初始尝试的示例。

$('#modalAccounts').createModal({
    {
        component: 'select',
        options: function () {
            $.postFind({
                data: {
                    database: 'dashboard',
                    collections: {
                        accountTypes: {
                            where: {status: true}
                        }
                    }
                },
                onSuccess: function (options) {
                    let dataArray = {};
                    $.each(options, function (key, val) {
                        dataArray[val._id.$oid] = val.type;
                    });
                    return dataArray;
                }
            })
        }
    }
});

在不同的尝试迭代中，我已经能够将数据返回到选项，但仍然不能作为选择中的一个。

经过一番摸索之后，它看起来像createModal脚本，它在AJAX调用可以返回选项之前执行和创建select。在查看事物时，我需要某种形式的promise来返回选项，但是（1）我不确定其外观如何，（2）我不确定promise的去向（在插件中，在createModal中）等）

您能提供的任何帮助都会很棒！

更新：发布时出现小错误，需要将结果传递回原始通话：options.onSuccess.call(this, obj);

Answer 1

我相信要在成功回调中使用变量，它们必须在ajax调用中定义为属性。然后使用回调内部的this来访问属性。喜欢：

        $.ajax({
            url: "../php/ajax.php",
            type: "POST",
            data: options.data,
            myOptions: options,
            statusCode: {
                404: function () {
                    alert("Page not found");
                }
            },
            success: function (result) {
                var obj = $.parseJSON(result);
                if (obj.success) {
                    if (typeof this.myOptions.onSuccess === 'function') {
                        this.myOptions.onSuccess.call(this);
                    }
                }
            },
            error: function (xhr, text, err) {
                console.log(err);
            }
        });

Answer 2

我不清楚问题出在哪里，而无法访问功能示例。我将从您想要做的简化版本开始，以演示正确的功能。我的猜测是回调设置不正确。在做出更明确的声明之前，我希望先查看网络调用堆栈。一些位置良好的cat语句可能会使您更好地了解代码的执行方式。

我编写并测试了以下代码，这些代码消除了代码段中的大多数复杂性。它是通过在页面加载时填充选择元素来工作的。

HTML文件：

cat

和PHP文件：

console.log()

这是一个fiddle，它也演示了该行为。

从AJAX将数组/对象返回到jquery脚本

2 个答案: