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

在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过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实现分类列表管理的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

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

    在实际应用中,我们要管理一个客户分类,实现对客户分类的增加.删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题. 准备阶段 您需要具备HTML和Jquery等前端知识,以及基本的PHP程序和MySql数据库相关知识.要实现本文中的DEMO示例,首先需要一个mysql数据库: CREATE TABLE `catalist` ( `cid` int(11) NOT NULL auto_increment, `title` varchar(100) NOT NU

  • php+mysql+jquery实现简易的检索自动补全提示功能

    本文实例讲述了php+mysql+jquery实现简易的检索自动补全提示功能.分享给大家供大家参考,具体如下: 这段时间看了一些关于自动补全提示方面的内容,发现大部分实现过程都十分复杂.心想这应该是一个比较简单的功能啊,于是自己亲自动手来小试一下.思路很常规,需要说明的是没有为提示内容绑定键盘事件,仅可用鼠标操作. html+jQuery内容: <html> <head> <style type="text/css"> #autoBox { marg

  • php使HTML标签自动补全闭合函数代码

    简单解释一些代码: 第一个 ~(<[^>]+?>)~si 这个正则是匹配<--->中的内容.简单说是所有的<标签>. 第二个 ~<([a-z0-9]+)[^/>]*?/>~si 这个正则是匹配<--/>中的内容.是单闭合标签 如<br /> 第三个 ~</([a-z0-9]+)[^/>]*?>~si 这个正则是匹配</......>中的内容.也就是结束标签 如</a> 第四个 ~&

  • php截取html字符串及自动补全html标签的方法

    本文实例讲述了php截取html字符串及自动补全html标签的方法.分享给大家供大家参考.具体分析如下: 这里总结一下关于利用php截取html字符串自动补全html标签,实际开发中会经常碰到,很多人直接先strip_tags过滤掉html标签,但是就只剩下纯文本了,可读性非常差,下面是一个函数,代码如下: 复制代码 代码如下: /**  * 截取HTML,并自动补全闭合  * @param $html  * @param $length  * @param $end  */ function

  • PHP文章采集URL补全函数(FormatUrl)

    写采集必用的函数,URL补全函数,也可叫做FormatUrl. 写此函数作用就是为了开发采集程序,采集文章的时候会经常遇到页面里的路径是 "相对路径" 或者 "绝对根路径" 不是"绝对全路径"就无法收集URL. 所以,就需要本功能函数进行对代码进行格式化,把所有的超链接都格式化一遍,这样就可以直接收集到正确的URL了. 路径知识普及 相对路径:"../" "./" 或者前面什么都不加 绝对根路径:/path

  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果. HTML <div id="list"> <ul></ul> </div> <div id="pagecount"></div> 页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页.下一页. 当然,别忘了,在head中预先载入jquery

  • PHP实现HTML标签自动补全代码

    一般情况下先用PHP的 strip_tags 函数去掉所有html标签,再去掉空格等,然后再用substr或者自己实现的cn_substr函数来实现截取.因为如果不先去掉html标签,直接截取出来的字符串就会有没有闭合的标签出现,有时甚至会截取在标签上面比如 复制代码 代码如下: </di ... 今天遇到一个内容翻页截取问题: 正文是用富文本编辑器写入的,编辑器上有个分页按钮,点击之后就往当前光标位置插入一个蓝色的 复制代码 代码如下: <hr /> 横线.然后php直接存入数据库.显

  • PHP自动补全表单的两种方法

    效果图: 第一种:从数据库中检索之后补全 第二种:邮箱等纯前端的补全 先说第二种,使用开源的插件,所以相对简单. github上面的项目 completer. https://github.com/fengyuanchen/completer 做法特别容易,github上面有详细的文档. 一开始尝试用这个来配上自己的后台代码,做成第一种的自动补全,搞了半天失败了.可能本人js太差,改动太多的话,代码很复杂,除非认真研究上面这个开源项目. 主要失败在我在后台数据库找出来的完整的模糊查询得到的数据,

  • PHP+jQuery实现自动补全功能源码

    前面手工写了一个下拉自动补全功能,写的简单,只实现了鼠标选择的功能,不支持键盘选择.由于项目很多地方要用到这个功能,所以需要用心做一下.发现select2这个插件的功能可以满足当前需求. 在使用jquery插件select2的过程中遇到了一些疑惑,无论是穿json数据还是通过jsonp方式取数据,都能够正确返回.可是下拉列表中的条目却不能被选中,对鼠标和键盘选择都无效. 后来发现,select2插件在实现选中时是以数据中的id字段为准的.所以不管是json还是jsonp,ajax返回的数据都必须

  • PHP+jQuery+Ajax+Mysql如何实现发表心情功能

    实现发表心情功能通过php+jquery+ajax+mysql技术,大致流程我先给大家理下:主页index.html页面通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向后台php发送请求,php对用户cookie验证(是否是首次提交),然后将数据库对应的心情字段内容加1,成功后返回前端页面,告诉首页index页面发表成功,并调整柱状图和统计数据. 请看效果图: html: 先看HTML,我们在index.html中放置一个#msg,用来显示操作结果信息,#mood是操

随机推荐