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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
VUE+node(express)实现前后端分离
Oct 13 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
详解Angular.js中$http拦截器的介绍及使用
2017/07/04 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
python中解析json格式文件的方法示例
2017/05/03 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
前台文员我鉴定
2014/01/12 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
视光学专业自荐信
2014/06/24 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2015年教师新年寄语
2014/12/08 职场文书
交警失职检讨书
2015/01/26 职场文书
网聊搭讪开场白
2015/05/28 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
python实现简单倒计时功能
2021/04/21 Python
python使用pymysql模块操作MySQL
2021/06/16 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android
Python中的socket网络模块介绍
2022/07/23 Python