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

前端技术 2023/09/08 JavaScript

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

本文地址：https://www.stayed.cn/item/21463

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案