sencha touch结合webservice读取jsonp数据详解
sencha touch读取jsonp数据主要依靠Ext.data.JsonP组件,在mvc的store文件中定义代码如下:
Ext.define('eparkapp.store.ParksNearby',{
extend:'Ext.data.Store',
requires: ['Ext.data.JsonP'],
config:{
model: 'eparkapp.model.Park',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://192.168.1.103/androidserv/PublicAppServ.asmx/ListNearInfo',
reader:{
type: 'json',
rootProperty: 'data'
},
extraParams: {
userId: 'll',
lng: '123',
lat: '39',
key: 'abc123'
},
callbackKey: 'callback'
},
sorters: [{ property: 'Range', direction: 'ASC'}]
}
});
其中重要的是url的写法,.asmx后增加webservice的方法名,传给webservice的参数使用extraParams配置项。另外callbackKey一定要加上,值可设置为默认的callback。
webservice的写法
using System;
using System.Configuration;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Web.Script.Services; namespace MobileServ
{
/// <summary>
/// PublicAppServ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消注释以下行。
[System.Web.Script.Services.ScriptService]
public class PublicAppServ : System.Web.Services.WebService
{ #region 服务 [WebMethod(Description = "获得测试数据的列表")]
public void ListNearInfo(string userId, string lng, string lat, string key)
{
HttpContext.Current.Response.ContentType = "application/json;charset=utf-8";
string jsonCallBackFunName = "callback";
if (HttpContext.Current.Request.Params["callback"]!=null)
jsonCallBackFunName = HttpContext.Current.Request.Params["callback"].ToString();
string result = string.Empty;
if (key == ConfigurationManager.AppSettings["WSKey"])
{
List<ParkInfo> lisPark = GetData();
result = "{success: true,data:[";
for (int i = ; i < lisPark.Count; i++)
{
result += "{";
result += "Name:'" + lisPark[i].Name + "'";
result += ",Address:'" + lisPark[i].Address + "'";
result += ",Range:" + lisPark[i].Range;
result += ",Price:" + lisPark[i].Price;
result += ",Count:" + lisPark[i].Count.ToString();
result += "}";
if (i < lisPark.Count - )
result += ",";
}
result += "]}";
}
HttpContext.Current.Response.Write(string.Format("{0}({1})", jsonCallBackFunName, new JavaScriptSerializer().Serialize(result))); } private List<ParkInfo> GetData()
{
List<ParkInfo> lisPark = new List<ParkInfo>();
ParkInfo pinfo1 = new ParkInfo();
pinfo1.Name = "测试路1";
pinfo1.Address = "测试地址1";
pinfo1.Range = "2.5";
pinfo1.Price = "";
pinfo1.Count = "";
lisPark.Add(pinfo1);
ParkInfo pinfo2 = new ParkInfo();
pinfo2.Name = "测试路2";
pinfo2.Address = "测试地址2";
pinfo2.Range = "3.2";
pinfo2.Price = "";
pinfo2.Count = "";
lisPark.Add(pinfo2);
ParkInfo pinfo3 = new ParkInfo();
pinfo3.Name = "测试路3";
pinfo3.Address = "测试地址3";
pinfo3.Range = "3.2";
pinfo3.Price = "";
pinfo3.Count = "";
lisPark.Add(pinfo3);
return lisPark;
} #endregion 服务
}
}
需要注意的是,webservice通过HttpContext.Current.Request.Params["callback"]来读取sencha touch从客户端发来的跨域请求的回调函数名callback。再把这个函数名加入到返回的json之前。实现客户端的跨域读取。
webservice的web.config配置节system.web下一定要加上如下配置项,否则sencha touch无法读取webservice的数据。
<webServices>
<protocols>
<add name="HttpPost"/>
<add name="HttpGet"/>
</protocols>
</webServices>
一切配置完成后,数据就能在view中展现出来。
sencha touch结合webservice读取jsonp数据详解的更多相关文章
- InheritableThreadLocal类原理简介使用 父子线程传递数据详解 多线程中篇(十八)
上一篇文章中对ThreadLocal进行了详尽的介绍,另外还有一个类: InheritableThreadLocal 他是ThreadLocal的子类,那么这个类又有什么作用呢? 测试代码 p ...
- linux驱动由浅入深系列:高通sensor架构实例分析之三(adsp上报数据详解、校准流程详解)【转】
本文转载自:https://blog.csdn.net/radianceblau/article/details/76180915 本系列导航: linux驱动由浅入深系列:高通sensor架构实例分 ...
- 利用rtklib处理GPS以及北斗数据详解
利用rtklib开源代码处理GPS以及北斗数据详解 在GNSS领域最基础的工作是这些GNSS系统的定位工作,对于绝大多数研究者,自己着手完成这些工作是一个"鸡肋":完全独立设计的话 ...
- android bundle存放数据详解
转载自:android bundle存放数据详解 正如大家所知道,Activity之间传递数据,是将数据存放在Intent或者Bundle中 例如: 将数据存放倒Intent中传递: 将数据放到Bun ...
- MySQL数据库使用mysqldump导出数据详解
mysqldump是mysql用于转存储数据库的实用程序.它主要产生一个SQL脚本,其中包含从头重新创建数据库所必需的命令CREATE TABLE INSERT等.接下来通过本文给大家介绍MySQL数 ...
- 【笔记】Pandas分类数据详解
[笔记]Pandas分类数据详解 Pandas Pandas分类数据详解|轻松玩转Pandas(5) 参考:Pandas分类数据详解|轻松玩转Pandas(5)
- Farseer.net轻量级开源框架 入门篇:添加数据详解
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 分类逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 修改数据详解 ...
- Farseer.net轻量级开源框架 入门篇:修改数据详解
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 下一篇:Farseer.net轻量级开源框架 入门篇: 删除数据详解 ...
- Farseer.net轻量级开源框架 入门篇:删除数据详解
导航 目 录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 修改数据详解 下一篇:Farseer.net轻量级开源框架 入门篇: 查询数据详解 ...
随机推荐
- 【原创】Maven cobertura整合多个子项目下的单测覆盖率报告
今天在调试一个UT job的时候发现找不到cobertural报告文件,后来发现在Maven的自项目里找到了对应的代码覆盖率报告,但都是是分散在每个子项目下面的,看起来很不方便.就在想是不是可以把这些 ...
- Redis 源码走读(一)事件驱动机制与命令处理
eventloop 从 server.c 的 main 方法看起 int main(int argc, char **argv) { ....... aeSetBeforeSleepProc(serv ...
- centos7.2使用yum安装MariaDB10.1
①添加MariaDB的yum源 1.创建MariaDB.repo sudo vi /etc/yum.repos.d/Mariadb.repo 2.将以下文件中的字段添加到MariaDB.repo文件中 ...
- django web 自定义通用权限控制
需求:web系统有包含以下5个url,分别对于不同资源: 1.stu/add_stu/ 2.stu/upload_homework/ 3.stu/query_homework/ 4.stu/add_r ...
- JS动态计算移动端rem的解决方案
首先介绍下rem 说起rem就的说px,em: PX为单位 在Web页面初期制作中,我们都是使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 ...
- Lookup 组件用法全解
Lookup是查找的意思,Lookup组件实现两个数据源的连接,和Join语句实现的功能类似,使用Lookup 组件需要配置: 两个输入:一个是上游数据流的输入Source Table,一个是要查找的 ...
- 分享Kali Linux 2017年第29周镜像文件
分享Kali Linux 2017年第29周镜像文件 Kali Linux官方于7月16日发布2017年的第29周镜像.这次维持了11个镜像文件的规模.默认的Gnome桌面的4个镜像,E17.KDE ...
- 【堆】bzoj1293 [SCOI2009]生日礼物
考虑poj3320尺取法的做法,与此题基本一样,但是此题的 位置 的范围到2^31 尺取法不可. 将每种珠子所在的位置排序. 每种珠子要维护一个指针,指到已经用到这个种类的哪个珠子. 所以尺取法用堆优 ...
- 【set】bzoj2761 [JLOI2011]不重复数字
set去重. #include<cstdio> #include<set> using namespace std; set<int>S; ],b[],en; in ...
- 【费马小定理+快速幂+逆元】BZOJ3240-[NOI2013]矩阵游戏
[题目大意] 若用F[i][j]来表示矩阵中第i行第j列的元素,则F[i][j]满足下面的递推式:F[1][1]=1F[i,j]=a*F[i][j-1]+b (j!=1)①F[i,1]=c*F[i-1 ...