jQuery之ajax删除详解

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

首先看html界面的代码:

<a href="javascript:;"  onclick="delete_order('<?php echo $item[order_id]; ?>')"><img src="images/admin/delete-icon.png" border="0" /></a>这个一个图片链接,表示删除。它并不跳转到某个界面,而是点击时出发click事件。

click事件执行delete_order()方法。这个方法中传递了一个参数,订单号。通过这个参数,可以去执行相应的删除操作。

下面jQuery代码:

复制代码 代码如下:

<script>
    function delete_order(order_id){   
        confirm_ = confirm('This action will delete current order! Are you sure?');
        if(confirm_){
            $.ajax({
                type:"POST",
                url:'index.php/admin/order/del/'+order_id,
                success:function(msg){
                    //alert("test order");
                    //all delete is success,this can be execute
                    $("#tr_"+order_id).remove();
                }
            });
        }
    };
</script>

首先出发一个提示框,确认删除吗?

如果确认的话,执行ajax操作。

在jQuery中,有一个$.ajax()的方法。

这里有三个参数,一个是类型,这里面用的是POST,

第二个是地址,这个很关键,它负责将数据,传送到后台服务器去执行。

第三个参数是一个回调函数,如果执行删除成功,就会执行的操作。这个时候,就可以执行一些动作,比如将这条已删除的记录,移除。结合的是下面的这行代码。为没条记录,赋予一个动态的id,作为删除时使用的依据。这里要注意的是,必须后台执行的所有都成功之后,才会执行这个回调函数。

<tr id="tr_<?php echo $item['order_id']; ?>"></tr>

下面的是后台执行的代码

复制代码 代码如下:

function del() {
    $order_id = $this->uri->segment(4);
    if ($order_id > 0) {
      $this->db->delete('billing', array('order_id' => $order_id));
      $this->db->delete('shipping_address', array('order_id' => $order_id));
      $this->db->delete('order_products', array('order_id' => $order_id));
      $this->db->delete('comments', array('order_id' => $order_id));
    }
    $this->db->delete($this->tbname, array('id' => $order_id));
  }

这个后台控制器中的一个方法,通过$this->uri->segment();方法获取参数,将参数赋值给变量order_id。

然后,就可以在后台执行相应的删除操作了。如果删除都成功的话,就会有一个默认的信息传递给success方法。

今天遇到的success方法执行不成功的原因,就是因为有一个删除操作执行不成功,那个隐藏的信息传递不到success方法。为什么不成功呢?因为$this->db->delete('shipping_address', array('order_id' => $order_id));与数据库中的表名不对应,大概是被别人修改了。

后来修正之后,success方法成功执行。


这是一个简单的ajax实例。可以简单的说明ajax的作用。不需要刷新界面,直接偷偷的去后台进行操作即可,操作成功后,还可以执行相应的动作,通过jQuery来完成

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

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多