快捷導(dǎo)航

jQuery之a(chǎn)jax刪除詳解

更新時(shí)間：2014年02月27日 10:17:31 作者：

ajax是局部刷新。用jQuery來(lái)實(shí)現(xiàn)，會(huì)簡(jiǎn)化很多。下面進(jìn)行詳細(xì)的說(shuō)明，結(jié)合一個(gè)ajax刪除的案例來(lái)進(jìn)行

首先看html界面的代碼：

<a href="javascript:;" onclick="delete_order('<?php echo $item[order_id]; ?>')"><img src="images/admin/delete-icon.png" border="0" /></a>這個(gè)一個(gè)圖片鏈接，表示刪除。它并不跳轉(zhuǎn)到某個(gè)界面，而是點(diǎn)擊時(shí)出發(fā)click事件。

click事件執(zhí)行delete_order()方法。這個(gè)方法中傳遞了一個(gè)參數(shù)，訂單號(hào)。通過(guò)這個(gè)參數(shù)，可以去執(zhí)行相應(yīng)的刪除操作。

下面jQuery代碼:

復(fù)制代碼代碼如下:

<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>

首先出發(fā)一個(gè)提示框，確認(rèn)刪除嗎？

如果確認(rèn)的話，執(zhí)行ajax操作。

在jQuery中，有一個(gè)$.ajax()的方法。

這里有三個(gè)參數(shù)，一個(gè)是類(lèi)型，這里面用的是POST，

第二個(gè)是地址，這個(gè)很關(guān)鍵，它負(fù)責(zé)將數(shù)據(jù)，傳送到后臺(tái)服務(wù)器去執(zhí)行。

第三個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，如果執(zhí)行刪除成功，就會(huì)執(zhí)行的操作。這個(gè)時(shí)候，就可以執(zhí)行一些動(dòng)作，比如將這條已刪除的記錄，移除。結(jié)合的是下面的這行代碼。為沒(méi)條記錄，賦予一個(gè)動(dòng)態(tài)的id，作為刪除時(shí)使用的依據(jù)。這里要注意的是，必須后臺(tái)執(zhí)行的所有都成功之后，才會(huì)執(zhí)行這個(gè)回調(diào)函數(shù)。

下面的是后臺(tái)執(zhí)行的代碼

復(fù)制代碼代碼如下:

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));
  }

這個(gè)后臺(tái)控制器中的一個(gè)方法，通過(guò)$this->uri->segment();方法獲取參數(shù)，將參數(shù)賦值給變量order_id。

然后，就可以在后臺(tái)執(zhí)行相應(yīng)的刪除操作了。如果刪除都成功的話，就會(huì)有一個(gè)默認(rèn)的信息傳遞給success方法。

今天遇到的success方法執(zhí)行不成功的原因，就是因?yàn)橛幸粋€(gè)刪除操作執(zhí)行不成功，那個(gè)隱藏的信息傳遞不到success方法。為什么不成功呢？因?yàn)?this->db->delete('shipping_address', array('order_id' => $order_id));與數(shù)據(jù)庫(kù)中的表名不對(duì)應(yīng)，大概是被別人修改了。

后來(lái)修正之后，success方法成功執(zhí)行。

這是一個(gè)簡(jiǎn)單的ajax實(shí)例?？梢院?jiǎn)單的說(shuō)明ajax的作用。不需要刷新界面，直接偷偷的去后臺(tái)進(jìn)行操作即可，操作成功后，還可以執(zhí)行相應(yīng)的動(dòng)作，通過(guò)jQuery來(lái)完成

您可能感興趣的文章: