jQuery之a(chǎn)jax刪除詳解
首先看html界面的代碼:
<a href="javascript:;" onclick="delete_order('<?php echo $item[order_id]; ?>')"><img src="images/admin/delete-icon.png" border="0" /></a>這個一個圖片鏈接,表示刪除。它并不跳轉(zhuǎn)到某個界面,而是點擊時出發(fā)click事件。
click事件執(zhí)行delete_order()方法。這個方法中傳遞了一個參數(shù),訂單號。通過這個參數(shù),可以去執(zhí)行相應的刪除操作。
下面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>
首先出發(fā)一個提示框,確認刪除嗎?
如果確認的話,執(zhí)行ajax操作。
在jQuery中,有一個$.ajax()的方法。
這里有三個參數(shù),一個是類型,這里面用的是POST,
第二個是地址,這個很關(guān)鍵,它負責將數(shù)據(jù),傳送到后臺服務器去執(zhí)行。
第三個參數(shù)是一個回調(diào)函數(shù),如果執(zhí)行刪除成功,就會執(zhí)行的操作。這個時候,就可以執(zhí)行一些動作,比如將這條已刪除的記錄,移除。結(jié)合的是下面的這行代碼。為沒條記錄,賦予一個動態(tài)的id,作為刪除時使用的依據(jù)。這里要注意的是,必須后臺執(zhí)行的所有都成功之后,才會執(zhí)行這個回調(diào)函數(shù)。
<tr id="tr_<?php echo $item['order_id']; ?>"></tr>
下面的是后臺執(zhí)行的代碼
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();方法獲取參數(shù),將參數(shù)賦值給變量order_id。
然后,就可以在后臺執(zhí)行相應的刪除操作了。如果刪除都成功的話,就會有一個默認的信息傳遞給success方法。
今天遇到的success方法執(zhí)行不成功的原因,就是因為有一個刪除操作執(zhí)行不成功,那個隱藏的信息傳遞不到success方法。為什么不成功呢?因為$this->db->delete('shipping_address', array('order_id' => $order_id));與數(shù)據(jù)庫中的表名不對應,大概是被別人修改了。
后來修正之后,success方法成功執(zhí)行。
這是一個簡單的ajax實例??梢院唵蔚恼f明ajax的作用。不需要刷新界面,直接偷偷的去后臺進行操作即可,操作成功后,還可以執(zhí)行相應的動作,通過jQuery來完成
- jquery ajax實現(xiàn)批量刪除具體思路及代碼
- PHP jQuery+Ajax結(jié)合寫批量刪除功能
- PHP ajax+jQuery 實現(xiàn)批量刪除功能實例代碼小結(jié)
- JQuery+ajax實現(xiàn)批量上傳圖片(自寫)
- jQuery通過ajax快速批量提交表單數(shù)據(jù)
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- jQuery ajax中使用confirm,確認是否刪除的簡單實例
- 如何從jQuery的ajax請求中刪除X-Requested-With
- jQuery+css3實現(xiàn)Ajax點擊后動態(tài)刪除功能的方法
- 基于php(Thinkphp)+jquery 實現(xiàn)ajax多選反選不選刪除數(shù)據(jù)功能
- jQuery+ajax實現(xiàn)批量刪除功能完整示例
相關(guān)文章
jQuery實現(xiàn)漂亮實用的商品圖片tips提示框效果(無圖片箭頭+陰影)
這篇文章主要介紹了jQuery實現(xiàn)漂亮實用的商品圖片tips提示框效果,具有鼠標滑過顯示動態(tài)提示框的效果,涉及針對鼠標事件的響應及頁面元素動態(tài)操作技巧,需要的朋友可以參考下2016-04-04jQuery實現(xiàn)平滑滾動頁面到指定錨點鏈接的方法
這篇文章主要介紹了jQuery實現(xiàn)平滑滾動頁面到指定錨點鏈接的方法,涉及jquery鼠標事件及頁面滾動的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)
顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實現(xiàn)方法。2009-05-05JSON中key動態(tài)設置及JSON.parse和JSON.stringify()的區(qū)別
這篇文章主要介紹了JSON中key動態(tài)設置及JSON.parse和JSON.stringify()的區(qū)別講解,非常不錯,具有參考借鑒價值,需要的朋友參考下2016-12-12jquery?追加元素append、prepend、before、after用法與區(qū)別分析
在jquery中append、prepend、before、after方法是對數(shù)據(jù)元素節(jié)點的操作系列方法了,這些方法大家了解嗎?如果不了解就可以和小編來看看它們用法2016-12-12