Ext4 JSONStore使用webservice返回的json数据

  asp.net framework3.5 webservice增加了检查content-type,如果请求头设置了content-type:'application/json',就会返回json字符,而不是xml。

  首先我们要了解一下webservice返回的json结构。返回的json格式是{"d":实际的内容},实际内容根据webservice方法返回值来确定。

1)如果是字符串字符,那么实际内容就是字符串。如果返回的是一个json格式的字符串,需要注意一下,实际内容不是json对象,具体参考:jQuery通过调用webservice返回json数据的问题

2)如果是List对象,那么实际内容就是一个数组,数组项目包含的内容依据List<T>的T来决定。
  a)如果T不是对象,普通类型,如string,int,则实际内容为字符串或者数字数组。
  b)如果T为类,那么实际内容为json数组,项目为json对象,属性包含类定义的公共属性,会还添加一个__type的属性,可以忽略,这个属性值的是webservice的名称和方法,如“"__type":"webservice.test+User"”

3)如果是类,那么实际内容为一个json对象,包含类定义的公共属性

  通过上面可以知道,ext4的JSONStore要使用webservice作为数据源时,需要注意下面4点
1)webservice可以返回List<类名称>这种类型的数据,reader配置的root为d属性,并且添加proxy的headers,增加"Content-Type": 'application/json'请求头以便返回json数据。

2)需要注意的是,JSONStore默认的请求方式是get请求,而webservice返回json数据需要为post请求或者明确用UseHttpGet=true指定了,这样才能用get方法请求,要不会出现错误,参考:ajax webservice中试图使用 GET 请求调用方法,但不允许这样做

3)当配置JSONStore的proxy为post请求时,默认JSONStore会提交参数limit,page,start 3个参数,如果你的webservice方法没有定义这3个参数,会出现{"Message":"无效的 JSON 基元: page/limit/start。"错误。解决办法就是配置proxy的limitParam,pageParam,startParam为undefined不发送这3个参数.

4)当方法有其他参数时,需要手动调用JSONStore的load方法,增加params配置,不能配置autoLoad,并且不能设置JSONStore proxy的extraParams,这样会extraParams被ext处理成url格式的键值对,导致参数不正确出现{"Message":"无效的 JSON 基元: name。",具体看示例里面的说明


  示例代码和效果如下

Ext4 JSONStore使用webservice返回的json数据

test.asmx

using System.Web.Script.Services;
using System.Web.Services;
using System.Collections.Generic;
namespace webservice
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [System.Web.Script.Services.ScriptService]
    public class test : System.Web.Services.WebService
    {
        public class User { public string Id, Name;}
        [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)]
        public List<User> Users(string name)//参数测试用
        {
            List<User> l = new List<User>();
            User u = new User(); u.Id = "1"; u.Name = "test1"; l.Add(u);
            u = new User(); u.Id = "2"; u.Name = "test2"; l.Add(u);
            u = new User(); u.Id = "3"; u.Name = "test3"; l.Add(u);
            return l;
        }
    }
}


test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4 JSONStore使用webservice示例</title>
<link type="text/css" rel="Stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        Ext.define('Student', {
            extend: 'Ext.data.Model',
            fields: ['Id', 'Name']
        });
        var store = new Ext.data.Store({
            model: 'Student',
            //autoLoad: true,//不能配置成自动加载,如果webservice方法有参数时,需要手动调用load方法并且增加params配置
            proxy: {
                type: 'ajax',
/////////////////////////post请求非常重要,要去掉这些参数
                limitParam: undefined,
                pageParam: undefined,
                startParam: undefined,
/////////////////////
                //extraParams:{name:"name"},//有参数时不能配置extraParams,传递的这个值会被编码为name=name,而webservice方法需要的是{name:"name"}这种格式的
                //extraParams: '{name:"name"}', //这样传递也不行,被编码成“0=%7B&1=n&2=a&3=m&4=e&5=%3A&6=%22&7=n&8=a&9=m&10=e&11=%22&12=%7D”,更加离谱,字符中内容全部作为内容了,自动增加从0开始递增的键名称
                actionMethods: {
                    read: 'POST'
                },
                headers: { "Content-Type": 'application/json' },//webservice返回JSON必备
                url: 'test.asmx/Users',
                reader: {
                    root: 'd',
                    idProperty: 'Id'
                }
            }
        });
//如果webservice没有参数,可以不用手动调用load方法,直接配置为autoLoad
        store.load({params:'{name:"name"}'})//在load中设置webservice需要的参数,为json格式的字符串,这样不会被编码
        var gridPanel1 = Ext.create('Ext.grid.Panel', {
            title: '学生信息表',
            store: store,
            width: 500,
            renderTo: document.body,
            id: 'panel',
            columnLines: true,
            columns: [{
                xtype: 'rownumberer', width: 20
            }, {
                text: '学号',
                dataIndex: 'Id', flex: 1,
                editor: {
                    xtype: 'textfield'
                }
            }, {
                text: '姓名',
                dataIndex: 'Name', flex: 1,
                editor: {
                    xtype: 'textfield'
                }
            }]
        });
    });
</script>
</head>
<body></body>
</html>

 

相关文章推荐

Ext4 XMLStore加载webservice数据源示例
ajax webservice中试图使用 GET 请求调用方法,但不允许这样做
jQuery通过调用webservice返回json数据的问题

加支付宝好友偷能量挖...


原创文章,转载请注明出处:Ext4 JSONStore使用webservice返回的json数据

评论(0)Web开发网
阅读(192)喜欢(0)extjs开发技巧