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。",具体看示例里面的说明
示例代码和效果如下
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数据