JSONP不工作在ExtJS 4 - 未捕获TypeError：无法调用方法'substring'未定义 [英] JSONP not working on ExtJS 4 - Uncaught TypeError: Cannot call method 'substring' of undefined

问题描述

我被这个代码困扰了，我从Youtube API得到这个json格式的数据，如果我使用类型：'json'它将失败，因为这个跨域的东西，但其他元素加载;那么，如果我将类型更改为'jsonp'（这是ExtJS API中描述的语法），它会给我这个错误：未捕获TypeError：不能调用方法'substring'未定义我尝试设置类型：'anyotherstupidthing'同样的情况发生了，那可能会发生什么？

以下是我当前的数据模型和我的商店：

  Ext .define（'Video'，{
 extends：'Ext.data.Model'，
 fields：['id'，'title'] 
}）; 
 
 myStore2 = Ext.create（'Ext.data.Store'，{
 model：'Video'，
 proxy：{
 type：'ajax' 
 url：'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc'，
 reader：{
 type：' jsonp'，
 root：'items'
} 
} 
}）; 
  

提前感谢！
Ed。

解决方案

JsonP要求服务器将返回的数据包装在JS函数调用中。通常的合同是将名为'callback'的参数传递给服务器，以允许唯一的名称，并避免客户端上的名称冲突。

调用URL <$ c $浏览器中的c> http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc&callback=myCallback 显示YouTube支持此惯例：

Ext通过Ext.data.proxy.JsonP代理类支持JsonP。读者是一个标准的JSON阅读器，而不是JsonP，您只需要考虑从服务器返回的数据结构（设置根到 data.items ）。

工作代码如下所示：

  var myStore2 = Ext.create（'Ext.data.Store'，{
 model：'Video'，
 proxy：{
键入：'jsonp'，
 url：'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc'，
 reader：{
类型：'json'，
 root：'data.items'
} 
}，
 listeners：{
 load：function（store，records） {
 Ext.each（record，function（rec）{
 console.log（rec.get（'title'））; 
}）; 
} 
 }，
 autoLoad：true 
}）; 
  

I'm stuck with this code, I'm getting this json formated data from the Youtube API, if I use type:'json' it will fail, because of that cross domain thing but the other elements loads anyway; then, if I change type: to 'jsonp' (which is the syntax described on the ExtJS API) it would give me this error:"Uncaught TypeError: Cannot call method 'substring' of undefined" I tried setting type:'anyotherstupidthing' and the same happens, so what could be happening?

Here are my current data model and my store:

Ext.define('Video', {
    extend: 'Ext.data.Model',
    fields: ['id', 'title']
});

myStore2 = Ext.create('Ext.data.Store', {
    model: 'Video',
    proxy: {
        type: 'ajax',
        url : 'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc',
        reader: {
            type: 'jsonp',
            root: 'items'
        }
    }
});

Thanks in advance! Ed.

解决方案

JsonP requires the server to wrap the returned data in a JS function call. The common contract is to pass a parameter named 'callback' to the server to allow for unique names and avoid name clashes on the client.

Calling the URL http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc&callback=myCallback in the browser shows that YouTube support this convention:

Ext supports JsonP via the Ext.data.proxy.JsonP proxy class. The reader is a standard JSON reader and not JsonP specific, you only need to account for the data structure returned from the server (set root to data.items).

The working code looks like this:

var myStore2 = Ext.create('Ext.data.Store', {
    model: 'Video',
    proxy: {
        type: 'jsonp',
        url : 'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc',
        reader: {
            type: 'json',
            root: 'data.items'
        }
    },
    listeners: {
        load: function(store, records) {
            Ext.each(records, function(rec) {
                console.log(rec.get('title'));
            });
        }
    },
    autoLoad: true
});

这篇关于JSONP不工作在ExtJS 4 - 未捕获TypeError：无法调用方法'substring'未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！