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那样的死对象。

以下代码可以使用并进行测试。

就像这样，回调被命名为theData：

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 success函数之后将其删除后，为您创建回调。在你的情况下，你也可以这样做，但我认为这个更简单的例子将显示基础知识。

然后使用PHP等将JSON包装在函数调用中。在PHP中，您可以使用$ GET [＆＃39; callback＆＃39;]获取函数的名称，并使用该字符串作为包装数据的函数的函数名称。加载脚本后，它将尝试运行＆＃34;数据，＆＃34;在这种情况下，这是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"
            }
         ]
      }
   ]
})

JavaScript JSONP请求错误 - 未捕获的SyntaxError：意外的令牌：

1 个答案: