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

所属分类: 网络编程 / JavaScript 阅读数: 388
收藏 0 赞 0 分享

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异步删除数据的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

更多精彩内容其他人还在看

浅谈Koa2框架利用CORS完成跨域ajax请求

这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue2.0 http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

轻松搞定jQuery+JSONP跨域请求的解决方案

了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
收藏 0 赞 0 分享

Vue2.0实现组件数据的双向绑定问题

这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

node的process以及child_process模块学习笔记

这篇文章主要介绍了node的process以及child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue2.0 循环遍历加载不同图片的方法

下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈Vue2.0中v-for迭代语法的变化(key、index)

下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用vue-aplayer插件时出现的问题的解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Element-ui table中过滤条件变更表格内容的方法

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多