jQuery之ajax删除详解


Posted in Javascript onFebruary 27, 2014

首先看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来完成

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
表格 隔行换色升级版
Nov 07 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
js 获取当前web应用的上下文路径实现方法
Aug 19 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
jQuery之字体大小的设置方法
Feb 27 #Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 #Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 #Javascript
jquery退出each循环的写法
Feb 26 #Javascript
jQuery中的val()示例应用
Feb 26 #Javascript
jquery live()调用不存在的解决方法
Feb 26 #Javascript
js获得参数的getParameter使用示例
Feb 26 #Javascript
You might like
剖析 PHP 中的输出缓冲
2006/12/21 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP生成树的方法
2015/07/28 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
python实现的登录和操作开心网脚本分享
2014/07/09 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python3处理含有中文的url方法
2018/05/10 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
python的命名规则知识点总结
2019/10/04 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
餐饮加盟计划书
2014/01/10 职场文书
文字自荐书范文
2014/02/10 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
创先争优公开承诺书
2014/08/30 职场文书
建议书范文
2015/02/05 职场文书
市场部岗位职责范本
2015/04/15 职场文书
面试复试通知单
2015/04/24 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android