




已阅读5页,还剩2页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
在实际应用中,我们要管理一个客户分类,实现对客户分类的增加、删除和修改等操作,如何让这些操作变得更人性化,让用户操作起来更加方便成了我们必须研究的课题。本文将采用jQuery+Ajax+PHP+MySQL来实现一个客户分类列表的管理,如何利用Ajax和Json技术让用户操作起来觉得更轻松,且看本文一一讲解。 展示下载准备阶段您需要具备HTML和jQuery等前端知识,以及基本的PHP程序和MySQL数据库相关知识。要实现本文中的DEMO示例,首先需要一个MySQLl数据库:1 CREATE TABLE catalist ( 2 cid int(11) NOT NULL auto_increment, 3 title varchar(100) NOT NULL, 4 sort mediumint(6) NOT NULL default 0, 5 PRIMARY KEY (cid) 6 ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 其次在页面中引入jquery库,以及操作结果提示插件jNotify和删除确认插件hiAlert。将需要准备的文件一并加入到index.php的之间。7 8 9 10 11 准备完毕我们进入主题。index.phpindex.php是主体页面,读取了数据库中的分类数据,以列表展示,并提供了增加、删除和修改的功能按钮。12 ?php 13 include_once(connect.php); /连接数据库 14 $query = mysql_query(select * from catalist order by cid asc); 15 while($row=mysql_fetch_array($query) 16 $list .= 17 .$rowtitle.; 18 19 ? 以上代码通过读取数据表中的数据,返回一个列表字符串。然后我们要将字符串输出到对应的列表中,代码如下:20 21 客户类别 22 23 24 25 新增一项 26 试着往数据表中添加几条数据,可以看到一个分类列表。CSS27 inputwidth:160px; padding:2px; border:1px solid #d3d3d3 28 cur_trbackground:#ffc 29 selectlistwidth:280px; margin:30px auto; border:1px solid #ccc; 30 selectlist h3height:32px; line-height:32px; padding:0 4px; border-bottom:1px dotted #d3d3d3; 31 background:#f7f7f7 32 selectlist h3 spanfloat:right; font-weight:500 33 selectlist ulmargin-top:4px; margin-left:20px; list-style-type: disc 34 selectlist ul liline-height:26px 35 selectlist pline-height:28px; padding-left:6px 36 selectlist ul li spanwidth:20px; height:20px 37 selectlist ul li span.edit float:right;background:url(images/edits.gif) no-repeat 0 5px; 38 cursor:pointer 39 selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer 40 float:right;background:url(images/del.gif) no-repeat 0 5px; cursor:pointer 41 selectlist ul li span.ok,.selectlist ul li span.oksfloat:right;background:url(images/ok.gif) 42 no-repeat 0 5px; cursor:pointer CSS我就不详细讲解,看下就明白了,最终显示的效果如图:新增项操作在global.js加入addOpt()函数:43 function addOpt() 44 var str = 45 ; 46 $(#catalist).append(str); 47 通过单击“新增一项”链接,向DOM中添加了一个新增项的输入框。当用户输入内容后,点击“保存”,将会触发一个ajax操作,先看代码:48 $(function() 49 /保存新增项 50 $(.ok).live(click,function() 51 var btn = $(this); 52 var input_str = btn.parent().find(input).val(); 53 if(input_str=) 54 jNotify(请输入类别!); 55 return false; 56 57 var str = escape(input_str); 58 $.getJSON(post.php?action=add&title=+str,function(json) 59 if(json.success=1) 60 var li = 61 + 62 json.title+; 63 $(#catalist).append(li); 64 btn.parent().remove(); 65 jSuccess(恭喜,操作成功!); 66 else 67 jNotify(出错了!); 68 return false; 69 70 ); 71 ); 72 ); 首先获取用户输入的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,保证中文字符能正确传输给后台程序识别。然后通过$.getJSON方法向后台post.php发起一个异步的Ajax请求。后台post.php接收参数值并进行相关处理,前端代码通过响应后台返回的JSON数据,如果新增成功,则向列表后面追加一项,并提示用户“操作成功”,如果失败则提示用户“出错了”。如果要取消新增项操作,只需当单击“取消”按钮时执行以下代码:73 /取消新增项 74 $(.dels).live(click,function() 75 $(this).parent().remove(); /将新增项移除 76 ); 后台post.php需要处理新增项内容,代码如下:77 include_once(connect.php); /连接数据库 78 $action = $_GETaction; 79 switch($action) 80 case add: /新增项 81 $title = uniDecode($_GETtitle,utf-8); 82 $title = htmlspecialchars($title,ENT_QUOTES); 83 $query = mysql_query(insert into catalist (cid,title) values (NULL,$title); 84 if($query) 85 $insertid = mysql_insert_id($link); 86 $arr = array(id=$insertid,title=$title,success=1); 87 else 88 $arr = array(success=2); 89 90 echo json_encode($arr); 91 break; 92 case : 93 break; 94 通过接收前端提交的内容,进行解码后,写入数据表中,并输出JSON数据格式供前台处理。关于uniDecode()函数,读者可以下载源码了解,主要是为了正确读取解析jquery通过异步提交的中文字符串。添加项操作已经完成,下面请看删除项操作。删除项操作回到global.js,在$(function()加入下面的代码:95 /删除项 96 $(.del).live(click,function() 97 var btn = $(this); 98 var id = btn.parent().attr(rel); 99 var URL = post.php?action=del; 100 hiConfirm(您确定要删除吗?, 提示,function(r) 101 if(r) 102 $.ajax( 103 type: POST, 104 url: URL, 105 data: id=+id, 106 success: function(msg) 107 if(msg=1) 108 jSuccess(删除成功!); 109 btn.parent().remove(); 110 else 111 jNotify(操作失败!); 112 return false; 113 114 115 ); 116 117 ); 118 ); 显然,通过单击“删除”按钮,同样是向后台post.php发送一个ajax请求,将删除项对应的参数ID发送给后台并响应后台处理结果,如果成功,则提示用户“删除成功”,并通过remove()将数据项移除,如果失败,则提示“操作失败”。后台post.php接收参数并作出相应的处理:119 case del: /删除项 120 $id = $_POSTid; 121 $query = mysql_query(delete from catalist where cid=.$id); 122 if($query) 123 echo 1; 124 else 125 echo 2; 126 127 break; 以上这段代码片段,加在post.php的switch语句中,执行了删除语句,并输出执行结果供前端处理。在上篇中,我们详细讲解了如何实现列表管理的新增和删除操作,可以看出,前端页面通过ajax与后台通信,根据后台处理结果响应前端页面交互操作,这是一个很典型的Ajax和JSON应用的例子。编辑项操作用户通过单击“编辑”按钮,相应的项会立即变为编辑状态,出现一个输入框,用户可以重新输入新的内容,然后点击“保存”按钮完成编辑操作,也可以单击“取消”按钮取消编辑状态。首先,通过单击“编辑”按钮,实现编辑状态,在global.js的$(function().)中加入如下代码:128 /编辑选项 129 $(.edit).live(click,function() 130 $(this).removeClass(edit).addClass(oks).attr(title,保存); 131 $(this).prev().removeClass(del).addClass(cancer).attr(title,取消); 132 var str = $(this).parent().text(); 133 var input = ; 134 $(this).next().wrapInner(input); 135 ); 从代码中可以看出,其实是改变了“编辑”按钮和“删除”按钮的class样式,修改了其title属性,然后将分类名称用一个input输入框包裹(wrapInner),这样就生成了一个编辑状态。要将修改好的内容提交给后台处理,通过单击“保存”按钮,会发生下面的事情,请看代码:136 /编辑处理 137 $(.oks).live(click,function() 138 var input_str = $(this).parent().find(input).val(); 139 if(input_str=) 140 jNotify(请输入类别名称!); 141 return false; 142 143 var str = escape(input_str); 144 var id = $(this).parent().attr(rel); 145 var URL = post.php?action=edit; 146 147 var btn = $(this); 148 $.ajax( 149 type: POST, 150 url: URL, 151 data: title=+str+&id=+id, 152 success: function(msg) 153 if(msg=1) 154 jSuccess(编辑成功!); 155 var strs = +input_str+; 157 btn.parent().html(strs); 158 else 159 jNotify(操作失败!); 160 return false; 161 162 163 ); 164 ); 通过单击编辑状态下的“保存”按钮,首先获取输入框的内容,如果没有输入任何内容则提示用户输入内容,然后将用户输入的内容进行escape编码,同时还要获取编辑项对应的ID,将输入的内容和ID作为参数通过$.ajax提交给后台post.php处理,并响应后台返回的信息,如果返回成功,则提示用户“编辑成功”,并且解除编辑状态,如果返回失败,则提示用户“操作失败”。后台post.php处理编辑项操作与上篇的新增项操作差不多,代码如下:165 case edit: /编辑项 166 $id = $_POSTid; 167 $title = uniDecode($_POSTtitle,utf-8); 168 $title = htmlspecialchars($title,ENT_QUOTES); 169 $query = mysql_query(update catalist set title=$title where cid=$id); 170 if($query) 171 ec
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 物业管理与客户服务标准指南
- 工地施工材料验收标准及规范
- 膝关节体格检查流程与常见问题
- 影视制作公司融资模式创新
- 生产线质量控制与环境污染预防措施
- 视频监控设备运行维护日志范本
- 一年级语文填空及词语搭配练习
- 基于全加权增量支持向量机的薄板复合材料粘接缺陷超声量化识别研究
- 基于儿童视角的幼儿园大班户外活动组织优化研究-以具体幼儿园为例
- 合作入股合同书8篇
- 2025年顶管安全监理实施细则
- 2025年及未来5年中国湖北建筑业行业市场调研分析及投资战略咨询报告
- 2025福建会考语文试卷及答案
- 2025广东金融学院招聘校医1人(编制)考试参考题库及答案解析
- 2025年广东省社区《网格员》真题汇编及答案
- 税务师涉税服务相关法律考试练习题及答案2025年
- 2025年浙江高考数学试题及答案详解
- 10.《牛郎织女》(一) 课件 2025-2026学年 统编版语文五年级上册
- 建筑企业税务培训
- 培训学校续费培训
- 风险平价策略与资产配置效率
评论
0/150
提交评论