JavaScript JSONP请求错误--未捕获的语法错误:意外的令牌:

Question

我正在本地开发一些东西并运行npm。

我尝试使用JavaScript在api上运行jsonp请求以获取一些数据。

我总是犯同样的错误，虽然不确定问题出在哪里，但一切看起来都很好。我们非常感谢您的帮助。

错误消息：Uncaught SyntaxError: Unexpected token :

注意：我根本不想为此使用jQuery

这是我在上的jsonp功能

function jsonp(url, callback) {
   var script = document.createElement("script");
   script.src = url
   document.body.appendChild(script);
}
jsonp('/api/nav.json', function(data){
    console.log(data);
});

JSON文件

{
   "items":[
      {
         "label":"Home",
         "url":"#/home",
         "items":[
         ]
      },
      {
         "label":"About",
         "url":"#/about",
         "items":[
            {
               "label":"What I eat",
               "url":"#/about/what-i-eat"
            },
            {
               "label":"How I Play",
               "url":"#/about/how-i-play"
            },
         ]
      },
      {
         "label":"Project",
         "url":"#/project",
         "items":[
         ]
      },
      {
         "label":"Ideas",
         "url":"#/ideas",
         "items":[
            {
               "label":"Cookies Club",
               "url":"#/ideas/cookies-club"
            },
            {
               "label":"Footie Boots",
               "url":"#/ideas/footie-boots"
            },
            {
               "label":"Books",
               "url":"#/ideas/books"
            }
         ]
      },
      {
         "label":"Contact",
         "url":"#/contact",
         "items":[
            {
               "label":"Email",
               "url":"#/contact/email"
            },
            {
               "label":"Phone",
               "url":"#/contact/phone"
            },
            {
               "label":"Snail Mail",
               "url":"#/contact/snail-mail"
            }
         ]
      }
   ]
}

Answer 1

您需要定义一个函数，该函数将由新加载的脚本调用。jsonp返回是要立即运行的活动代码，而不是像传统json那样的死对象。

下面的代码工作正常并经过测试。

所以类似这样的东西，回调被命名为Data:

function jsonp(url, callback) {
   var script = document.createElement("script");
   script.src = url
   document.body.appendChild(script);
}

theData = function(data){
    console.log(data);
}
jsonp('ok.js?callBack=theData');

Jquery为您创建回调，方法是将其传递给jsonp加载程序，将函数临时添加到Window，然后在将其发送到jsonp成功函数后，在调用该函数后将其删除。在您的情况下，您也可以这样做，但我认为这个更简单的示例将显示基本情况。

然后使用PHP等将JSON封装在函数调用中。在PHP中，您可以使用$GET['callback']获取函数的名称，并将该字符串用作包装数据的函数的函数名。加载脚本后，它将尝试运行"数据"，在这种情况下，这是Window上可用的函数。如果html也是本地的，这将允许您加载本地文件，并允许您打开来自不同域的数据。所以服务器的输出是：

theData({ "items":[
      {
         "label":"Home",
         "url":"#/home",
         "items":[
         ]
      },
      {
         "label":"About",
         "url":"#/about",
         "items":[
            {
               "label":"What I eat",
               "url":"#/about/what-i-eat"
            },
            {
               "label":"How I Play",
               "url":"#/about/how-i-play"
            },
         ]
      },
      {
         "label":"Project",
         "url":"#/project",
         "items":[
         ]
      },
      {
         "label":"Ideas",
         "url":"#/ideas",
         "items":[
            {
               "label":"Cookies Club",
               "url":"#/ideas/cookies-club"
            },
            {
               "label":"Footie Boots",
               "url":"#/ideas/footie-boots"
            },
            {
               "label":"Books",
               "url":"#/ideas/books"
            }
         ]
      },
      {
         "label":"Contact",
         "url":"#/contact",
         "items":[
            {
               "label":"Email",
               "url":"#/contact/email"
            },
            {
               "label":"Phone",
               "url":"#/contact/phone"
            },
            {
               "label":"Snail Mail",
               "url":"#/contact/snail-mail"
            }
         ]
      }
   ]
})