Question

我在下面有以下代码：

<!DOCTYPE html>
<html lang="en">
    <head>

        <title>HTML</title>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script>
            $(document).ready(function() {

                $("#b1").click(function(event) {

                    var pm_url = 'http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&jsoncallback=wooYay&api_key=52c5c9441e7965eb55b7e54246bc6abf';

                    $.ajax({
                        url : pm_url,
                        dataType : 'jsonp',
                        jsonpCallback : 'wooYay',
                        jsonp : 'callback',
                    });

                function wooYay(data) {
                    alert(data);
                    console.log('hi');
                };  

                });

            });
        </script>
    </head>

    <body>
        <div>
            <button id="b1">
                Click Me!
            </button>
        </div>
        <div class="results"></div>

    </body>
</html>

当我在Google Chrome开发工具中查看此内容时，我清楚地看到如下响应：

wooYay({"method":{"_content":"flickr.test.echo"}, "format":{"_content":"json"}, "jsoncallback":{"_content":"wooYay"}, "api_key":{"_content":"52c5c9441e7965eb55b7e54246bc6abf"}, "callback":{"_content":"wooYay"}, "_":{"_content":"1357519661919"}, "stat":"ok"})

但不知何故，函数wooYay永远不会执行。另外我想在代码块中保留函数wooYay。有人可以告诉我错误在哪里吗？

谢谢，吉姆

Answer 1

wooYay未全局公开，因为它是在匿名函数中定义的。您可以将其指定为......

window.wooYay = function(data) { };

Answer 2

这根本不可能。
wooYay()在全局范围内不可见。

您应该正常使用getJSON()。

Answer 3

最大的问题是你将jsonCallback与AJAX成功回调混淆。

wooYay中的jsonCallback用于定义您在发布的响应数据中看到的响应的包装器。

jQuery还使用提供的名称或者如果你没有提供一个名称来打开这个包装器中包含的数据

但是，这不会运行您命名为wooYay的函数。这需要在$ .ajax的成功回调中运行。

虽然在clcik处理程序中定义函数wooYay是非正统的，但它的工作原理如下：

$("#b1").click(function (event) {

  var pm_url = 'http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&jsoncallback=wooYay&api_key=52c5c9441e7965eb55b7e54246bc6abf';

  $.ajax({
    url: pm_url,
    dataType: 'jsonp',
    jsonpCallback: 'wooYay',
    jsonp: 'callback',
     /* added success callback*/
    success: wooYay
  });

  function wooYay(data) {
    alert('See data in console');
    console.log(data);
  };

});

DEMO：http://jsfiddle.net/kT6dq/

重构版本，以尽量减少 wooYay 混淆

function responseHandler(data) {
   alert('See data in console');
   console.log(data);
 };   


 $("#b1").click(function (event) {
   var pm_url = 'http://www.flickr.com/services/rest/?method=flickr.test.echo&format=json&jsoncallback=wooYay&api_key=52c5c9441e7965eb55b7e54246bc6abf';

   $.ajax({
     url: pm_url,
     dataType: 'jsonp',
     jsonpCallback: 'wooYay',
     jsonp: 'callback',
     success: responseHandler
   });
 });

演示（重构代码）http://jsfiddle.net/kT6dq/1/

在jQuery中使用定义的回调

3 个答案: