将 JQuery getJSON 与包含的其他 JavaScript 一起使用会产生 ReferenceError

Posted 2023-05-08

【中文标题】将 JQuery getJSON 与包含的其他 JavaScript 一起使用会产生 ReferenceError

【英文标题】：Using JQuery getJSON with other JavaScripts included gives ReferenceError

【发布时间】：2011-04-18 20:17:53

【问题描述】：

我制作了一个小示例 html 页面来让 JQuery 的 getJSON 方法工作。它看起来像下面（抱歉草率，这只是一个概念证明，以后会添加到更大的项目中）：

<script type="text/javascript">

function test()    
$.getJSON("http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=e999b3a5d47d013b780e8ac255c86266&user_id=24579658@N03&format=json&jsoncallback=?",    
                function(data)
                      $.each(data.photos.photo, function(i,photo)
     $("<img/>").attr("src", "http://farm5.static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg").appendTo("#images2");
    //alert();
        if ( i == 6 ) return false;
      );
);

然后，当使用

单击某些内容时，我会调用该方法

<script type="text/javascript">

                            $(function() 
                                $("#yo").click(test);
                            );
    </script>

这在我包含的唯一 JS 是 JQuery 并且这些是唯一功能的项目中运行良好。但是，一旦我将它添加到我的另一个项目中，它就会出现错误。另一个项目包含一些我认为可能一直在做的 mootools 库。但是，即使在完全删除 mootools 的东西并只使用这个 jquery 的东西之后，我仍然会收到以下错误：

ReferenceError: $ 未定义

我确实包含了其他的 javaScript，例如 google 和我制作的其他一些，但它们不使用 JQuery 或 Mootools。谁能解释我为什么会收到这个错误？

【问题讨论】：

很好奇，为什么不直接使用$("#yo").click(test);，为什么函数会换行？ jquery 是否处于 noConflict 模式？

@Dimitar 那是 $(document).ready() 的快捷方式

【参考方案1】：

听起来好像您引入的一些附加代码未定义 $ 符号。事实上，您可能已经包含了一些调用 jQuery 的 noConflict 函数的代码，该函数专门取消了 $ 的定义。

jQuery 本质上是这样定义的：

$ = jQuery;

这意味着您可以将代码中的 $ 符号替换为“jQuery”，例如：

jQuery.getJSON(...

或

jQuery(function() 
    jQuery("#yo").click(test);
);

当然，$ 符号快捷方式当然很方便。放弃它会很可惜，因此您可以重新定义它以再次代表“jQuery”。但是，您不希望它破坏您的任何其他非 jQuery JavaScript，因此重新建立 $ 快捷方式的安全方法是将您自己的所有代码包装在闭包中。每个闭包函数的唯一参数是“$”，传递给每个闭包的参数是“jQuery”。例如：

(function($) 
        function test()    
            $.getJSON("http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=e999b3a5d47d013b780e8ac255c86266&user_id=24579658@N03&format=json&jsoncallback=?",    
                        function(data)
                              $.each(data.photos.photo, function(i,photo)
             $("<img/>").attr("src", "http://farm5.static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg").appendTo("#images2");
            //alert();
                if ( i == 6 ) return false;
              );
        );
)(jQuery);

请注意，匿名函数闭包有参数 $，所以在整个函数内部，$ 将具有您传递给匿名函数的值。接下来，请注意在函数定义结束时，我们立即调用刚刚定义的函数，并将 jQuery 作为参数传递。这意味着在闭包内部，但 only 在闭包内部，$ 现在是 jQuery 的快捷方式。

最后一点，您可以通过调用 jQuery.noConflict() 故意关闭 jQuery 对 $ 符号的使用（请参阅http://api.jquery.com/jQuery.noConflict/）。如果您将使用除您的代码和 jQuery 之外的其他 JavaScript 代码，最好在加载完所有 JavaScript 文件后调用该函数，然后使用上述闭包技术，这样您就可以安全地继续在您自己的代码中使用 $ 快捷方式。

【讨论】：

感谢@dgvid，这正是我想要的。

【参考方案2】：

$ is not defined 表示 jQuery 在错误点没有链接到 $ 变量。这可能是由于以下两个原因之一：

jQuery 曾经被设置为 $ 变量，但现在不再是。例如，您可能拨打了jQuery.noConflict()。 您还没有定义 jQuery。这可能是因为您已将此脚本放置在对 jQuery 库的调用之上。确保您引用的第一个脚本是 jQuery 源代码。

【讨论】：

我引用的第一个脚本是 jQuery 库。当您说曾经设置为“$”时，您的意思是我不必再使用$了吗？如果我取出 $ 然后添加 jQuery.noConflict();在 getJson 调用之前，我收到以下错误： Uncaught ReferenceError: jQuery is not defined 否则，如果我删除 noconflict 行和 $，我会得到： Uncaught TypeError: Object function (el, nc) return document.id(el, nc，this.document）； 没有方法“getJSON”

加载 jQuery 库时，它会将 $ 设置为对该库的引用。如果您愿意，可以使用 jquery.noConflict() 更改此设置。其他库（例如 mootools）也使用 $ 变量，并且拥有多个库会导致命名冲突。您是否删除了对 mootools 库的引用？

Uncaught TypeError: Object function (el, nc) return document.id(el, nc, this.document); has no method 'getJSON' -> document.id 是一个 mootools 函数（如果之前未定义，则 $ 映射到它）。这意味着 jquery 未能自行定义。你在使用大于 1.2.2 的 mootools 吗？无论如何，无关紧要，您说引用异常也发生在没有 mootools 的情况下。

【参考方案3】：

您与 $ 变量有冲突，因为 mootools 也在尝试使用该变量。一次只能使用 1 个。

查看 jQuery.noConflict() -> http://api.jquery.com/jquery.noconflict/

在尝试使用 jQuery 之前，您无需调用任何冲突。使用 jQuery.noConflict() 有几个选项。一种是在任何地方重新分配和使用特定于 jQuery 的变量：

$jQ = jQuery.noConflict();

现在你可以使用 $jQ

$jQ( "#yo" ).click( test );

在处理单独的 JS 文件时，您可以使用一个小 JS 功能来允许 '$' 变量在您的文件中表示“jQuery”：

(function($) 
  function test()    
  $.getJSON("http://api.flickr.com/services/rest/
  &method=flickr.people.getPublicPhotos&api_key=e999b3a5d47d013b780e8ac255c86266&user_id=24579658@N03&format=json&jsoncallback=?",    
                  function(data)
                        $.each(data.photos.photo, function(i,photo)
      $("<img/>").attr("src", "http://farm5.static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg").appendTo("#images2");
      //alert();
          if ( i == 6 ) return false;
        );
  );
)(jQuery);

这个小美被称为自调用匿名函数。我们将 $ 定义为输入参数，但传入 jQuery 以确保 $ 变量的含义。

【讨论】：

他说即使拿出 mootools 也能收支平衡。 mootools 不会尝试接管 $（除非旧版本） - 如果 $ 由其他东西定义，则 mootools 将恢复为 document.id。如果它要接管它，它肯定不会以未定义的形式出现。