万博体育ManBetX手机版

欢迎访问

云南万博信息技术有限公司官方网站,云南网站建设诚信品牌!

万博网络,云南万博信息技术有限公司

万博客服热线

DING HAO COLUMN 万博专栏

万博的一些分享
Sharing from Ding Hao

  • 万博服务
  • 1

采用Jquery+Ajax+PHP+MySQL实现分类列表管理 - 上篇

来源:     2013年07月02日17:02
字号:T|T

在实际应用中,我们要管理一个客户分类,实现对客户分类的增加、删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题。

本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,且看本文一一讲解。

查看演示DEMO 下载源码

准备阶段

您需要具备HTML和Jquery等前端知识,以及基本的PHP程序和MySql数据库相关知识。要实现本文中的DEMO示例,首先需要一个mysql数据库:

CREATE TABLE `catalist` (
  `cid` int(11) NOT NULL auto_increment,
  `title` varchar(100) NOT NULL,
  `sort` mediumint(6) NOT NULL default '0',
  PRIMARY KEY  (`cid`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

其次在页面中引入jquery库,以及操作结果提示插件jNotify和删除确认插件hiAlert。后者两个插件在本站都有详细的讲解,读者可以通过链接了解下:jNotify:操作结果信息提示条 hiAlert:美化的网页对话框

将需要准备的文件一并加入到index.php的之间。


准备完毕我们进入主题。

index.php

index.php是主体页面,读取了数据库中的分类数据,以列表展示,并提供了增加、删除和修改的功能按钮。

 ".$row['title']."";
}
?>

以上代码通过读取数据表中的数据,返回一个列表字符串。然后我们要将字符串输出到对应的列表中,代码如下:

客户类别

新增一项

试着往数据表中添加几条数据,可以看到一个分类列表。

CSS

.input{width:160px; padding:2px; border:1px solid #d3d3d3}
.cur_tr{background:#ffc}
.selectlist{width:280px; margin:30px auto;  border:1px solid #ccc;}
.selectlist h3{height:32px; line-height:32px; padding:0 4px; border-bottom:1px dotted #d3d3d3;
 background:#f7f7f7}
.selectlist h3 span{float:right; font-weight:500}
.selectlist ul{margin-top:4px; margin-left:20px; list-style-type: disc}
.selectlist ul li{line-height:26px}
.selectlist p{line-height:28px; padding-left:6px}
.selectlist ul li span{width:20px; height:20px}
.selectlist ul li span.edit{ float:right;background:url(/jQuery/images/edits.gif) no-repeat 0 5px; 
cursor:pointer}
.selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer{
 float:right;background:url(/jQuery/images/del.gif) no-repeat 0 5px; cursor:pointer}
.selectlist ul li span.ok,.selectlist ul li span.oks{float:right;background:url(/jQuery/images/ok.gif) 
no-repeat 0 5px; cursor:pointer}

CSS我就不详细讲解,看下就明白了,最终显示的效果如图:

新增项操作

在global.js加入addOpt()函数:

function addOpt(){
	var str = "
  • "; $("#catalist").append(str); }

    通过单击“新增一项”链接,向DOM中添加了一个新增项的输入框。

    当用户输入内容后,点击“保存”,将会触发一个ajax操作,先看代码:

    $(function(){
        //保存新增项
    	$(".ok").live('click',function(){
    		var btn = $(this);
    		var input_str = btn.parent().find('input').val();
            if(input_str==""){
    			jNotify("请输入类别!");
    			return false;
    		}
    		var str = escape(input_str);
    		$.getJSON("post.php?action=add&title="+str,function(json){
    			if(json.success==1){
    				var li = "
    
  • "+ json.title+"
  • "; $("#catalist").append(li); btn.parent().remove(); jSuccess("恭喜,操作成功!"); }else{ jNotify("出错了!"); return false; } }); }); });

    首先获取用户输入的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,保证中文字符能正确传输给后台程序识别。然后通过$.getJSON方法向后台post.php发起一个异步的Ajax请求。后台post.php接收参数值并进行相关处理,前端代码通过响应后台返回的JSON数据,如果新增成功,则向列表后面追加一项,并提示用户“操作成功”,如果失败则提示用户“出错了”。

    如果要取消新增项操作,只需当单击“取消”按钮时执行以下代码:

    //取消新增项
    $(".dels").live('click',function(){
    	 $(this).parent().remove();  //将新增项移除
    });

    后台post.php需要处理新增项内容,代码如下:

    include_once('connect.php'); //连接数据库
    $action = $_GET['action'];
    switch($action){
        case 'add':  //新增项
    	   $title = uniDecode($_GET['title'],'utf-8');
    	   $title = htmlspecialchars($title,ENT_QUOTES);
    	   $query = mysql_query("insert into catalist (cid,title) values (NULL,'$title')");
    	   if($query){
    		   $insertid = mysql_insert_id($link);
    		   $arr = array('id'=>$insertid,'title'=>$title,'success'=>1);
    	   }else{
    		   $arr = array('success'=>2);
    	   }
    	   echo json_encode($arr);
    	   break;
         case '':
           break;
    }

    通过接收前端提交的内容,进行解码后,写入数据表中,并输出JSON数据格式供前台处理。关于uniDecode()函数,读者可以下载源码了解,主要是为了正确读取解析jquery通过异步提交的中文字符串。

    添加项操作已经完成,下面请看删除项操作。

    删除项操作

    回到global.js,在$(function(){})加入下面的代码:

    //删除项
    	$(".del").live('click',function(){
    		var btn = $(this);
    		var id = btn.parent().attr('rel');
    		var URL = "post.php?action=del";
            hiConfirm('您确定要删除吗?', '提示',function(r){
    	        if(r){
    			  $.ajax({
                    type: "POST",
                    url: URL,
    			    data: "id="+id,
    			    success: function(msg){
    				   if(msg==1){
    					   jSuccess("删除成功!");
    					   btn.parent().remove();
    				   }else{
    					   jNotify("操作失败!");
    					   return false;
    				   }
                    }
    			 });
    			}
    		});
    	});

    显然,通过单击“删除”按钮,同样是向后台post.php发送一个ajax请求,将删除项对应的参数ID发送给后台并响应后台处理结果,如果成功,则提示用户“删除成功”,并通过remove()将数据项移除,如果失败,则提示“操作失败”。

    后台post.php接收参数并作出相应的处理:

    case 'del':  //删除项
    	$id = $_POST['id'];
    	$query = mysql_query("delete from catalist where cid=".$id);
    	if($query){
    		echo '1';
    	}else{
    		echo '2';
    	}
    	break;

    以上这段代码片段,加在post.php的switch语句中,执行了删除语句,并输出执行结果供前端处理。

    限于篇幅,修改项操作在下一篇文中讲解,敬请关注。

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心