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 相关文章推荐
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 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中sprintf与printf函数用法区别解析
2014/02/17 PHP
php修改数组键名的方法示例
2017/04/15 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
如何表示python中的相对路径
2020/07/08 Python
Python实现简单的2048小游戏
2021/03/01 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
I.T集团香港官方商城:ITeSHOP.com Hong Kong
2019/02/15 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
《颐和园》教学反思
2014/02/26 职场文书
食品安全工作方案
2014/05/07 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers