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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
antd design table更改某行数据的样式操作
Oct 31 Javascript
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
自动跳转中英文页面
2006/10/09 PHP
自己动手做一个SQL解释器
2006/10/09 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
PHP 实现重载
2021/03/09 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python爬取读者并制作成PDF
2015/03/10 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
python 画图 图例自由定义方式
2020/04/17 Python
用Python开发app后端有优势吗
2020/06/29 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
初中军训感想300字
2014/03/05 职场文书
售后求职信范文
2014/03/15 职场文书
大学开学计划书
2014/04/30 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript