Angularjs的$http异步删除数据详解及实例


Posted in Javascript onJuly 27, 2017

Angularjs的$http异步删除数据详解及实例

有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了。

嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑

怎么确定数据是否删除成功?

怎么同步视图的数据库的内容?

1.思路

1.实现方式一

删除数据库中对应的内容,然后将$scope中的对应的内容splice

2.实现方式二

删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要保证先删除数据再查询)

2.具体实现方式

删除数据的service:用异步,返回promise

service('deleteBlogService',//删除博客
    ['$rootScope',
      '$http',
      '$q',
      function ($rootScope, $http, $q) {
        var result = {};
        result.operate = function (blogId) {
          var deferred = $q.defer();
          $http({
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            url: $rootScope.$baseUrl + "/admin/blog/deleteBlogById",
            method: 'GET',
            dataType: 'json',
            params: {
              id: blogId
            }
          })
            .success(function (data) {
              deferred.resolve(data);
              console.log("删除成功!");
            })
            .error(function () {
              deferred.reject();
              alert("删除失败!")
            });
          return deferred.promise;
        };
        return result;
      }])

controller里面注意事项

要特别注意执行顺序:确保己经删除完成之后再去reload数据,不然会出来视图不更新             

/**
         * 删除博客
         */
        $scope.deleteBlog = function (blogId) {
          var deletePromise = deleteBlogService.operate(blogId);
          deletePromise.then(function (data) {
            if (data.status == 200) {
              var promise = getBlogListService.operate($scope.currentPage);
              promise.then(function (data) {
                $scope.blogs = data.blogs;
                $scope.pageCount = $scope.blogs.totalPages;
              });
            }
          });
        };

以上就是Angularjs的$http异步删除数据的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 #Javascript
Angularjs的键盘事件的绑定
Jul 27 #Javascript
Angularjs 事件指令详细整理
Jul 27 #Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 #Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 #Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 #Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 #Javascript
You might like
php模板中出现空行解决方法
2011/03/08 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
php备份数据库类分享
2015/04/14 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python删除n行后的其他行方法
2019/01/28 Python
Python变量类型知识点总结
2019/02/18 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Django框架反向解析操作详解
2019/11/28 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
超市中秋节促销方案
2014/03/21 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
如何写好竞聘报告
2019/04/03 职场文书
django 认证类配置实现
2021/11/11 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS