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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JS简单获取及显示当前时间的方法
Aug 03 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
js Math数学简单使用操作示例
Mar 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获取远程文件内容的函数
2015/11/02 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
js面试题之异步问题的深入理解
2020/09/20 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
遗传算法python版
2018/03/19 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
解决Python二维数组赋值问题
2019/11/28 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
公司年会搞笑主持词
2014/03/24 职场文书
家长会演讲稿
2014/04/26 职场文书
安全宣传标语口号
2014/06/06 职场文书
春风化雨观后感
2015/06/11 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫