Jquery+Ajax+PHP+MySQL实现分类列表管理(下)


Posted in Javascript onOctober 28, 2015

在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子。
本文将继续上篇文中的示例,完成编辑操作。
编辑项操作
用户通过单击“编辑”按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击“保存”按钮完成编辑操作,也可以单击“取消”按钮取消编辑状态。
首先,通过单击“编辑”按钮,实现编辑状态,在global.js的$(function(){...})中加入如下代码:

//编辑选项 
$(".edit").live('click',function(){ 
  $(this).removeClass('edit').addClass('oks').attr('title','保存'); 
  $(this).prev().removeClass('del').addClass('cancer').attr('title','取消'); 
  var str = $(this).parent().text(); 
  var input = "<input type='text' class='input' value='"+str+"' />"; 
  $(this).next().wrapInner(input); 
});

从代码中可以看出,其实是改变了“编辑”按钮和“删除”按钮的class样式,修改了其title属性,然后将分类名称用一个input输入框包裹(wrapInner),这样就生成了一个编辑状态。
要将修改好的内容提交给后台处理,通过单击“保存”按钮,会发生下面的事情,请看代码:

//编辑处理 
$(".oks").live('click',function(){ 
  var input_str = $(this).parent().find('input').val(); 
  if(input_str==""){ 
    jNotify("请输入类别名称!"); 
    return false; 
  } 
  var str = escape(input_str); 
  var id = $(this).parent().attr("rel"); 
  var URL = "post.php?action=edit"; 
     
  var btn = $(this); 
  $.ajax({ 
      type: "POST", 
      url: URL, 
      data: "title="+str+"&id="+id, 
      success: function(msg){ 
        if(msg==1){ 
          jSuccess("编辑成功!"); 
          var strs = "<span class='del' title='删除'></span><span class='edit' 
          title='编辑'></span><span class='txt'>"+input_str+"</span>; 
          btn.parent().html(strs); 
        }else{ 
          jNotify("操作失败!"); 
          return false; 
        } 
      } 
  }); 
});

通过单击编辑状态下的“保存”按钮,首先获取输入框的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,同时还要获取编辑项对应的ID,将输入的内容和ID作为参数通过$.ajax提交给后台post.php处理,并响应后台返回的信息,如果返回成功,则提示用户“编辑成功”,并且解除编辑状态,如果返回失败,则提示用户“操作失败”。
后台post.php处理编辑项操作与上篇的新增项操作差不多,代码如下:

case 'edit': //编辑项 
  $id = $_POST['id']; 
  $title = uniDecode($_POST['title'],'utf-8'); 
  $title = htmlspecialchars($title,ENT_QUOTES); 
  $query = mysql_query("update catalist set title='$title' where cid='$id'"); 
  if($query){ 
    echo '1'; 
  }else{ 
    echo '2'; 
  } 
  break;

以上代码片段加在post.php的switch语句中,代码接收了前端传来的id和title参数,并对title参数进行解码,然后更新数据表中对应的项,并输出执行结果给前台处理。
要取消编辑状态,则通过单击“取消”执行以下代码:

//取消编辑 
$(".cancer").live('click',function(){ 
  var li = $(this).parent().html(); 
  var str_1 = $(this).parent().find('input').val(); 
  var strs = "<span class='del' title='删除'></span><span class='edit' title='编辑'> 
  </span><span class='txt'>"+str_1+"</span>"; 
  $(this).parent().html(strs); 
});

其实,代码重新组装了一个字符串,重新将组装的字符串替代了编辑状态,即取消了编辑状态。
通过这样一个实际应用的案例,我们可以体验前端技术的优越性,用户完成的每一步操作是那么的友好,这是用户体验的一个方面。Jquery库让ajax操作变得如此简单,文中代码中还用到了jquery的live方法,这是为了绑定动态创建DOM元素所必需的。

上面两篇就是小编为大家整理的关于Jquery+Ajax+PHP+MySQL实现分类列表管理的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
Dec 19 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
ES10的13个新特性示例(小结)
Sep 23 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 #Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 #Javascript
Jquery日历插件制作简单日历
Oct 28 #Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 #Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 #Javascript
JavaScript多并发问题如何处理
Oct 28 #Javascript
JS实现双击屏幕滚动效果代码
Oct 28 #Javascript
You might like
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
基于python指定包的安装路径方法
2018/10/27 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
python新手学习可变和不可变对象
2020/06/11 Python
为什么python比较流行
2020/06/19 Python
python利用线程实现多任务
2020/09/18 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
违反工作纪律检讨书
2014/02/15 职场文书
质量安全标语
2014/06/07 职场文书
硕士生找工作求职信
2014/07/05 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
导游词范文
2015/02/13 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
回复函格式及范文
2015/07/14 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery