jQuery之ajax删除

ajax是局部刷新。

用jQuery来实现，会简化很多。

下面进行详细的说明，结合一个ajax删除的案例来进行。

首先看html界面的代码：

<a href="javascript:;"  οnclick="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来完成。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/archive/2012/09/26/2704292.html，如需转载请自行联系原作者