ajax“回调未定义”错误答案

【问题标题】：ajax "callback is undefined" errorajax“回调未定义”错误
【发布时间】：2013-10-07 20:21:32
【问题描述】：

我目前正在尝试返回一个数据库调用来填充一个下拉框。但是，当我循环浏览返回的列表时，我收到“回调未定义”错误。我已经用两种方式尝试了这段代码，但都不起作用。

我试过了：

$('#Vehicle_KovId_value').change(function () {
        var kovID = $(this).val();
        var drop2 = $('#Vehicle_BodyStyle_value');
        if (kovID != null && kovID != '') {
            drop2.get(0).options.length = 0;
            drop2.get(0).options[0] = new Option('Please Select One', '-1');
            $.ajax({
                type: "GET",
                url: '/Ajax/Index',
                async: false,
                data: { KovID: kovID },
                contentType: "application/object; charset=utf-8",
                success: function (record) {
                    drop2.get(0).options.length = 0;
                    drop2.get(0).options[0] = new Option("Please Select One", "-1");
                    $.each(function (index, item) {
                    drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
                    });
                },
                error: function () {
                    $('#Vehicle_BodyStyle_value').get(0).options.length = 0;
                    $('#Vehicle_BodyStyle_value').get(0).options[0] = new Option("Error!", "-1");
                    alert("Failed to load styles");
                }
            });
        }
    });

我也试过了：

$('#Vehicle_KovId_value').change(function () {
        var kovID = $(this).val();
        var drop2 = $('#Vehicle_BodyStyle_value');
        if (kovID != null && kovID != '') {
            drop2.get(0).options.length = 0;
            drop2.get(0).options[0] = new Option('Please Select One', '-1');
            $.ajax({
                type: "GET",
                url: '/Ajax/Index',
                async: false,
                data: { KovID: kovID },
                contentType: "application/object; charset=utf-8",
                success: function (record) {
                    drop2.get(0).options.length = 0;
                    drop2.get(0).options[0] = new Option("Please Select One", "-1");
                    fillBStyles(record);
                    //                    $.each(function (index, item) {
                    //                        drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
                    //                    });
                },
                error: function () {
                    $('#Vehicle_BodyStyle_value').get(0).options.length = 0;
                    $('#Vehicle_BodyStyle_value').get(0).options[0] = new Option("Error!", "-1");
                    alert("Failed to load styles");
                }
            });
        }
    });

    function fillBStyles(r) {
        var drop2 = $('#Vehicle_BodyStyle_value');
        $.each(function (index, item) {
            drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
        });

    }

这两个都给我错误：

TypeError：回调未定义

返回的数据对象record 是我必须从中提取两部分的数据库对象列表。

如何修复这个“回调”错误，以便在我的函数中使用我的数据？

【问题讨论】：

你在哪里得到这个错误？如果它在 JavaScript 控制台中，错误引用了哪一行？如果它来自服务器，那么它在服务器端代码中，与此无关。
我正在使用 Firebug 来调试 javascript 部分。它告诉我错误出现在jquery-1.7.js(line 654)，它读取if ( callback.call( object[ name ], name, object[ name ] ) === false ) {，然后如果if 为真则中断。
您可能错误地使用了 jQuery 函数，或者将未定义的值作为回调函数传递给它。如果您在调试器中逐步执行此操作，您的代码在 jQuery 抛出该错误之前会走多远？
它在 Firebug 向我显示的内容中中断并在 $.each(function (index, item) { 抛出错误。

标签： jquery ajax callback

【解决方案1】：

回调是在其前身完成其操作并返回一个值后立即执行的函数。在这种情况下，您有两个回调，成功和失败。

函数声明不允许在块内（if/else/for 闭包），这意味着您的回调函数（您在 ajax 闭包内声明）function (record) { } 不能放在它所在的位置，因为它在您的 if (kovID != null && kovID != '') { } 闭包内.

幸运的是，有一个简单的解决方法：在 if 语句之外声明您的成功回调函数（将其单独放在全局范围内），如下所示：

function ajaxSuccess(record) {
                drop2.get(0).options.length = 0;
                drop2.get(0).options[0] = new Option("Please Select One", "-1");
                $.each(function (index, item) {
                drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
                });
            }
// ...do other javascript stuff

并像这样调用成功函数：

$.ajax({
            type: "GET",
            url: '/Ajax/Index',
            async: false,
            data: { KovID: kovID },
            contentType: "application/object; charset=utf-8",
            success: ajaxSuccess
//...blah blah blah

【讨论】：

【解决方案2】：

我认为您没有正确使用$.each。查看the docs 中的示例。如果与 jQuery 选择器一起使用，您使用它的方式将起作用，但您使用的是 .each() 直接在 $ 上。这意味着您没有向它提供任何可以迭代的东西。看看你的代码：

$.each(function (index, item) {
    drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
});

这是在迭代什么？对于每个what，这个函数会执行吗？你的意思可能是这样的：

$('someSelector').each(function (index, item) {
    drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
});

或者这个：

$.each(someArray, function (index, item) {
    drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
});

无论哪种方式，您都需要为.each() 提供一个用于迭代的集合。我想象它默认为后一种情况的错误，但由于在您的使用中没有第二个参数，所以没有callback 被提供给$.each()。

【讨论】：

这与@Mike Hometchko 的回答相结合，有助于确定第二个下拉菜单的填充位置。查看我对当前问题的更新。
@Kendra：这看起来像是服务器端代码中的错误。看起来您在List<T> 上调用.ToString()，这将生成您所看到的字符串。如果您想要实际列表本身，则需要将其序列化为 JSON。在没有看到服务器端代码的情况下，我真的无法更具体，但是如果您从 MVC 操作返回，那么您可以执行类似 return Json(someList); 而不是 return Content(someList.ToString()); 之类的操作，我只是在猜测您当前的服务器是什么-side 代码看起来像。
这很可能是问题所在。服务器端当前正在返回一个数据库列表，这可能是同样的问题。我可以发布代码。这里没有人知道如何做到这一点，因此我在这里问。通常，我可以问我的同事如何使用某些代码，但他们以前没有处理过。
@Kendra：评论线程在这里变得有点沉重，这在 Stack Overflow 问题/答案中通常是不受欢迎的。我建议将这些问题分成两个问题，因为它们是不同的问题，人们可以在不同的情况下发现它们很有帮助。

【解决方案3】：

移动你的

function fillBStyles(r) {
        var drop2 = $('#Vehicle_BodyStyle_value');
        $.each(function (index, item) {
            drop2.get(0).options[drop2.get(0).options.length] = new Option(item.Display, item.Value);
        });

    }

高于其他功能。

然后使用 ||与&& if (kovID != null && kovID != '')

为什么需要&&，kovID不会等于任何一个，而&&表示它必须同时满足两个要求。

【讨论】：

&& 以防有人将第一个下拉菜单设置为默认设置，其值为 ""。
我刚试过这个，但没有解决它。不过还是谢谢你的建议！