ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合
来源:互联网 发布:大学生软件实训基地 编辑:程序博客网 时间:2024/06/05 20:59
ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合
继上节课,我已经介绍了使用$q和callback的方式,从service服务获取数据。
但是在真实的项目中,一般是用户使用控制器通过服务向服务端发起数据请求,由获取的数据传递给模型,再由模型更新视图展示给用户这样一个MVC过程,详细的可以查看我的第二课。(USER------use------>CONTROLLERUSER------manipulates------>MODEL------update------>VIEWUSER------sees------>USER这个过程来自一张网络图片)
详细的API文档,可以自行查阅资料,我这里直接说用法。
1、$http.get()+callback
ChatsCtrl:
function successCallback(data){}
function failCallback(error){}
ChatsService.getAllData(successCallback,failCallback);
ChatsService:
getAllData: function(successCallback,failCallback) {
var url = "http:///"
$http.get(url).success(function (data) {
//业务处理
successCallback(data)
}).error(function (error) {
//业务处理
failCallback(error)
})
},
这样子的访问对于内网开发且上线项目客户端和服务器地址发布在同一个域的朋友来说,是没有什么问题的。
但是大部分情况下,这样子的代码运行都会出现一个跨域访问的问题。
对于这个问题的处理,我一般的解决方案就是使用jsonp来代替get方法。
2、$http.jsonp()+callback
ChatsCtrl和方法1相同
ChatsService:
getAllData: function(successCallback,failCallback) {
var url = "http:///"
url+="&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
//业务处理
successCallback(data)
}).error(function (error) {
//业务处理
failCallback(error)
})
},
使用jsonp就可以实现跨域访问,所以我一般向服务器请求数据的时候都是直接使用jsonp的方式。
这里借用了公司的一个测试接口给大家演示一下效果。
修改了一点点html里面的内容
为了使代码更加的规范和便于调试。我接下来介绍怎么使用$q的链式编程方式。
至于多个界面之间的参数传递,留待后面的课程中补充吧。
关于$q上一节课已经详细的说明过程,这里就不再累述了。
为了保留上面的代码,我新加入一个服务,用于演示。
ChatDetailService:
getGameData: function(gameId) {
var deferred = $q.defer();
var url = "http://m?id="+gameId;
url+="&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
//业务处理
deferred.resolve(data.data);
}).error(function (error) {
//业务处理
deferred.reject(error)
})
return deferred.promise;
}
};
ChatDetailCtrl:
ChatDetailService.getGameData($stateParams.gameId).then(function (data) {
$scope.chat = data;
}, function (error) {
console.log(error)
});
增加一个服务,然后根据数据修改了html内容。
对于还不是很了解ionic和编程基础比较薄弱的朋友,注意看我下面截图的这几个地方。
好好理解这点内容。
tab-chats文件中修改了地址传递参数的名字,注意这里的名字只是对应了数据对象中元素的名字。与路由中和实际取值的元素名无关。
修改路由中传递参数的名字,注意这里名字取什么,在controller中取值就要用什么。
实际使用的取值$stateParams是一个从路由地址中取值的内部服务,注意这里的变量名要跟app里面设置的路由中名字相同。
最后有几点需要注意的是,加了服务,要记得加到服务里面。
还有使用了内部服务记得注入,如$q和$http.
至此这节课的内容基本结束了。下节课我将介绍,如何在多个视图界面之间传递参数。
在此特别感谢福建萝卜网络科技有限公司(http://www.lbwan.com),提供的演示接口。
很感谢这么多朋友阅读我的博客,同时也希望大家能够关注我的公众号,虽然现在内容还在建设中,但是相信我会用心去做的,
请大家关注一下我的公众号,就算给我一点点鼓励吧
项目Demo地址:http://pan.baidu.com/s/1pLf7jSJ
--- 转自:http://blog.csdn.net/onil_chen/article/category/6113346 ---
- ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合
- ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合
- ionic入门教程第十七课-深入讲解与服务器的交互$http、$q、设置头部、不包括$resourse
- ionic入门教程第十七课-深入讲解与服务器的交互$http、$q、设置头部、不包括$resourse
- http的post和get请求方式
- WebAPI GET和POST请求的几种方式
- WebAPI GET和POST请求的几种方式
- jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
- http常见的get请求方式和set请求方式。
- jsonp跨域请求的几种方式
- android的http请求get和post请求方式
- jsonp和callback的使用
- jsonp和callback的使用
- http请求的几种方式
- HTTP协议请求的几种方式
- http get请求获取服务器返回的应答数据
- HttpClient get和HttpClient Post请求的方式获取服务器的返回数据
- HttpClient get和HttpClient Post请求的方式获取服务器的返回数据
- Mybatis最入门---HelloWorld
- java定时器,每天00:00执行任务
- iOS开发之旅--Reveal查看别人的App
- 初识SVG
- CSS书写规范、顺序
- ionic入门教程第六课-从服务器请求数据的几种方式$http.get()、jsonp()分别和callback、$q的组合
- try {}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后?
- QT Creator 如何建立动态链接库和使用的方法(详细的图文教程以及错误的讲解)
- 文章标题
- 线程传递结构体参数
- 二进制中1的个数
- Mybatis最入门---Mapper文件配置详解(上)
- ViewPagerTransforms
- [leetcode]98. Validate Binary Search Tree -- JavaScript 代码