Jquery Ajax PHP MySQL实现分类列表管理（上)

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

准备阶段您需要具备超文本标记语言和Jquery等前端知识，以及基本的服务器端编程语言(专业超文本预处理器的缩写)程序和关系型数据库数据库相关知识。要实现本文中的演示示例，首先需要一个关系型数据库数据库：

CREATE TABLE ` catalist `(` cid ' int(11)NOT NULL auto _ increment，` title ' varchar(100)NOT NULL，` sort ' medium int(6)NOT NULL DEFAULT ' 0 '，PRIMARY KEY(` cid `))ENGINE=MyISAM DEFAULT CHARSET=utf8；其次在页面中引入jquery库，以及操作结果提示插件jNotify和删除确认插件希尔勒特。后者两个插件在本站都有详细的讲解，读者可以通过链接了解下：将需要准备的文件一并加入到index.php的头之间。

脚本类型=' text/JAVAScript ' src=' http : js/jquery。js /脚本脚本类型=' text/JAVAScript ' src=' http : js/jnotify。jquery。js /脚本类型=' text/JAVAScript ' src=' http : js/jquery。警惕。js /脚本脚本类型=' text/JAVAScript ' src=' http 3360 js/准备完毕我们进入主题。index.phpindex.php是主体页面，读取了数据库中的分类数据，以列表展示，并提供了增加、删除和修改的功能按钮。

？PHP include _ once(' connect。PHP’)；//连接数据库$query=mysql_query('通过cid asc从目录顺序中选择* ');while($ row=MySQL _ fetch _ array($ query)){ $ list .='li rel=' .$ row[' cid ']' span class=' del ' title='删除/span span class='edit' title='编辑/spanspan class='txt ' ' .$row['title']./span/Li '；} ?以上代码通过读取数据表中的数据，返回一个列表字符串。然后我们要将字符串输出到对应的列表中，代码如下：

div class='selectlist' h3客户类别/h3 ul id='catalist '？php echo $ list？/ul pa href=' JAVAScript :'onclick=' addOpt()'新增一项a/p /div试着往数据表中添加几条数据，可以看到一个分类列表CSS。输入{ width :160 pxpadding :2 pxborder :1 px实心#d3d3d3} .cur_tr{background:#ffc} .select list { width :280 pxmargin :30 px汽车；border:1px固体# ccc}。选择列表h3 { height:32px线高：32 pxpadd :0 4 pxborder-bottom :1 px虚线# d3d3d3背景：#f7f7f7} .选择列表H3跨度{ float : right字体粗细：500} .选择列表ul { margin-top :4 px；左边距left :20 pxlist-style-type :光盘}。选择列表ul li{line-height:26px} .选择列表p {行高：28 px填充-左侧：6px} .选择列表ul li span {宽度：20px高度：20px} .选择列表ul Li span。编辑{ float : right背景： URL(图片/编辑。gif)无重复0 5px光标：指针} .选择列表ul li span.del .选择列表ul li span.dels .选择列表ul Li span。巨蟹座{ float :右；背景： URL(图片/del。gif)无重复0 5px光标：指针} .请选择一个列表。好的。选择列表ul Li span。oks { float : right背景： URL(图片/ok。gif)无重复0 5px光标：指针} CSS我就不详细讲解，看下就明白了，最终显示的效果如图：

新增项操作在全球。射流研究…加入addOpt()函数：

函数addPoT(){ var str=' lispan class=' dels ' title='取消/spanspan class='ok' title='保存/span输入类型=' text ' class=' input '/Li；$('#catalist ').追加（字符串);} 通过单击"新增一项"链接，向数字正射影像图中添加了一个新增项的输入框。当用户输入内容后，点击"保存",将会触发一个创建交互式、快速动态网页应用的网页开发技术操作，先看代码：

$(function(){ //保存新项目$(')。ok’)。live ('click '，function(){ varbtn=$(this)；var input_str=btn.parent()。查找('输入')。val()；If(input_str==''){ jNotify('请输入类别！');返回false} var str=escape(input _ str)；$.getJSON('post.php？Action=add title=' str，function (JSON) {if (JSON。success==1){ var Li=' lirel=' ' JSON。id ' span class=' del ' title=' delete '/span span class=' edit ' title=' edit '/span class=。$('#catalist ')。追加(Li)；btn.parent()。移除()；js成功('恭喜，手术成功！' );}else{ jNotify('错误！' );返回false} });});});首先获取用户输入的内容，如果什么都没有输入，提示用户输入内容，然后对用户输入的内容进行转义编码，保证汉字能够正确传输到后台程序进行识别。然后，通过$，向后台post.php发起异步Ajax请求。getJSON方法。后台post.php接收参数值并对其进行处理。前端代码响应后台返回的JSON数据。如果添加成功，则在列表的后面添加一个项目，并提示用户“操作成功”。如果失败，系统会提示用户“错误”。如果要取消新项目操作，只需在单击“取消”按钮时执行以下代码：

//取消新项目$()。dels’)。live ('click '，function () {$ (this)。父项()。移除()；//删除新项目})；post.php需要处理新项目的背景，代码如下：

include _ once(' connect . PHP ')；//连接数据库$ action=$ _ GET[' action ']；switch($ action){ case ' add ' ://new item $ title=uniode($ _ get[' title ']，' utf-8 ')；$title=htmlspecialchars($title，ENT _ QUOTES)；$query=mysql_query('插入到catalist (cid，title)值中(NULL，' $ title ')')；if($ query){ $ insert id=MySQL _ insert _ id($ link)；$arr=array('id'=$insertid，' title'=$title，' success '=1)；} else { $ arr=array(' success '=2)；} echo JSON _ encode($ arr)；打破；案例“”: break}接收到前端提交的内容后，解码写入数据表，输出JSON数据格式进行前台处理。至于uniDecode()函数，读者可以下载源代码来理解，主要是为了正确读取和解析jquery异步提交的中文字符串。添加项目的操作已经完成。请参见下面删除项目的操作。返回到global.js，在$(function(){})中添加以下代码：

//删除项目$()。del’)。live ('click '，function(){ varbtn=$(this)；var id=btn.parent()。attr(' rel ')；var URL='post.php？action=del '；确认('您确定要删除它吗？'，' prompt '，函数(r) {if (r) {$。Ajax ({type:' post '，url3360url，data:' id=' id，success 3360 function(msg){ if(msg==1){ js success(')。);btn.parent()。移除()；}else{ jNotify('操作失败！' );返回false} } });} });});显然，通过点击“删除”按钮，它也在向后台post.php发送一个ajax请求，向后台发送被删除项对应的参数ID，并响应后台处理结果。如果成功，提示用户“删除成功”，通过remove()删除数据项；如果失败，将提示用户“操作失败”。后台post.php接收参数并进行相应处理：

case ' del ' ://delete item $ id=$ _ POST[' id ']；$query=mysql_query('从目录列表中删除，其中cid=')。$ id)；if($ query){ echo ' 1 '；} else { echo ' 2} break将上述代码片段添加到post.php的switch语句中，执行删除语句，并输出执行结果进行前端处理。由于篇幅有限，修改项目的操作将在下一篇文章中说明。请注意，不要错过。