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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
jQuery Ajax()方法使用指南
Nov 19 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
基于Three.js插件制作360度全景图
Nov 29 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
Python中处理时间的几种方法小结
2015/04/09 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Python实现制作销售数据可视化看板详解
2021/11/27 Python