位置: 编程技术 - 正文

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

编辑：rootadmin

推荐整理分享Jquery+Ajax+PHP+MySQL实现分类列表管理(上)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

其次在页面中引入jquery库，以及操作结果提示插件jNotify和删除确认插件hiAlert。后者两个插件在本站都有详细的讲解，读者可以通过链接了解下：将需要准备的文件一并加入到index.php的<head>之间。

准备完毕我们进入主题。index.phpindex.php是主体页面，读取了数据库中的分类数据，以列表展示，并提供了增加、删除和修改的功能按钮。

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

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

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

新增项操作在global.js加入addOpt()函数:

通过单击“新增一项”链接，向DOM中添加了一个新增项的输入框。当用户输入内容后，点击“保存”，将会触发一个ajax操作，先看代码：

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

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

通过接收前端提交的内容，进行解码后，写入数据表中，并输出JSON数据格式供前台处理。关于uniDecode()函数，读者可以下载源码了解，主要是为了正确读取解析jquery通过异步提交的中文字符串。添加项操作已经完成，下面请看删除项操作。删除项操作回到global.js，在$(function(){})加入下面的代码：

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

以上这段代码片段，加在post.php的switch语句中，执行了删除语句，并输出执行结果供前端处理。限于篇幅，修改项操作在下此文章中再进行讲解，敬请关注，不要错过喽。

Jquery+Ajax+PHP+MySQL实现分类列表管理(下) 在上篇中，我们详细讲解了如何实现列表管理的新增和删除操作，可以看出，前端页面通过ajax与后台通信，根据后台处理结果响应前端页面交互操作，

jquery实现模拟百分比进度条渐变效果代码本文实例讲述了jquery实现模拟百分比进度条渐变效果代码。分享给大家供大家参考，具体如下：这里为了便于看到加载百分比，对代码进行了处理，实

牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作只有jQuery对象才能调用jQuery类库的各种函数，同样有些dom对象的属性和方法在jQuery上也是无法调用的，不过基本上jQuery类库提供的函数包含了所有的dom

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

本文链接地址:https://www.jiuchutong.com/biancheng/370447.html 转载请保留说明！

上一篇：自己动手写的jquery分页控件(非常简单实用)(可以自己做手写的软件)

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