-
准备阶段
您需要有前端知识，如HTML和jQuery，以及基本的PHP程序和mysql数据库相关的知识：
创建表（`催化剂`
` CID ` int（11）不为空auto_increment，
`标题` varchar（100）不为空，
`排序` MEDIUMINT（6）不为空的默认'0'，
主键（CID）
= MyISAM引擎默认的字符集utf8）；
其次，jQuery库引入页面，和运行结果提示确认删除插件和插件jnotify hialert。本站后两插件有详细的解释，读者可以通过链接了解：
需要准备的文件添加到index.php。
我们准备讨论这个问题。
index.php
Index.php is the main body page that reads the classified data in the database, displays it in a list, and provides functional buttons to add, delete, and modify.
< PHP
include_once（'connect。php）； / /数据库连接
为查询= mysql_query（SELECT * FROM催化剂为CID ASC ）；
而（$行= mysql_fetch_array（$查询））{
$清单
美元。行{标题}。。
}
>
上面的代码通过读取数据表中的数据返回一个列表字符串，然后我们将字符串输出到相应的列表，如下所示：
客户类别
添加新项
尝试将一些数据添加到表中，您可以看到类别列表。
CSS
输入{宽度：160px；填充：2px；边框1px solid # d3d3d3 }
背景：# FFC。cur_tr { }
。SelectList {宽度：280px；保证金：30px汽车；边界：# 1px solid ccc；}
SelectList h3 {。高度：32px；线高度：32px；填充：0 4px；底部边框：1px点缀# d3d3d3；
背景：# f7f7f7 }
。SelectList H3跨度{浮动权；字体重量：500 }
{保证金。SelectList UL顶：4px；margin-left: 20px列表样式类型：；盘}
。SelectList ul {线高度：26px }
。SelectList P {线高度：28px；填充左：6px }
selectlist UL Li跨{宽度：20px；身高：20px }
selectlist UL Li的跨度。编辑{浮动权；背景：URL（图像/编辑GIF）没有重复0 5px；
游标：指针}
selectlist UL Li的跨度。德尔，Selectlist UL Li模型，Selectlist UL Li跨跨。。。癌症{
浮：权利；背景：URL（图像/德尔.webp）没有重复0 5px；鼠标指针}
selectlist UL Li的跨度。好的，Selectlist UL Li的跨度。OKS {浮动权；背景：URL（图像/好的。gif）
不重复的0 5px；鼠标指针}
我不详细解释，我会看的。
新的项目运作
在global.js，加上采取（）函数：
功能选择（）{
var
；
$（#催化剂）追加（STR）；
}
通过单击一个新的链接，一个新条目被添加到DOM中。
当用户输入内容时，单击保存，它将触发ajax操作，首先查看代码：
$（函数（）{（））
保存/新建
$（好）。活（听到咔哒声，函数（）{）
VaR建立美元（这）；
无功input_str = btn.parent（），发现（输入的）瓦迩（）；
如果（input_str = =）{
jnotify（请输入类别！；
返回false；
}
var str =逃避（input_str）；
美元。getJSON（的帖子。phpaction = addtitle =+ str函数（JSON）{
如果（JSON = 1）{
Var Li =
+
+；
$（#催化剂）。追加（李）；
Btn.parent（）删除（）；
jsuccess（恭喜你，成功运行！；
其他{ }
jnotify（错！；
返回false；
}
}）；
}）；
}）；
首先，获取用户输入内容。如果没有输入内容，则提示用户输入内容。然后，用户输入的内容进行逃生，所以汉字可以正确地传输到后台程序识别。然后美元。getJSON方法用于初始化一个异步Ajax请求的背景post.php.the背景post.php接收参数值和处理。前端代码响应后台返回的JSON数据。如果新应用程序成功，它会将一个项添加到列表中，并提示用户成功地操作。如果失败，则提示用户出错。
如果要取消新操作，只需单击取消按钮执行以下代码：
取消/新建
$（。模式）。活（听到咔哒声，函数（）{）
$（.）
}）；
The background post.php needs to deal with the new items. 代码如下：
include_once（'connect。php）； / /数据库连接
行动=美元_get美元{ 'action}；
开关（$动作）{
case'add： / /新
标题= unidecode美元（美元_get {标题}，'utf-8）；
标题= htmlspecialchars（$美元的标题，ent_quotes）；
查询= mysql_query美元（插入催化剂（CID，标题）值（null，' $标题））；
如果（$查询）{
美元（$链接）= mysql_insert_id插；
$ ARR =阵列（'id' = > $插，标题= > $标题，''成功' = > 1）；
其他{ }
$ ARR =阵列（''成功' = > 2）；
}
回声json_encode（$ ARR）；
打破；
案例'：
打破；
}
通过接收由前端，提交的内容解码，写入的数据表，并输出JSON数据格式为前台处理。对于unidecode（）函数，读者可以下载源代码，主要看中文字符串解析解析jQuery的异步提交。
项目操作的添加已经完成，请参见删除操作。删除项目操作。
早在global.js，$（函数（）{ }）用下面的代码：
删除项目
$（。德尔）。活（听到咔哒声，函数（）{）
VaR建立美元（这）；
var id = btn.parent（）Attr（'rel）；
var url =的帖子。phpaction =德尔；
HiConfirm（你确定要删除吗，提示，函数（R）{
如果（r）{
$ ajax（{
类型：邮政
网址，
数据：id+ id，
成功：函数（MSG）{
如果（MSG = 1）{
jsuccess（删除成功！；
Btn.parent（）删除（）；
其他{ }
jnotify（操作失败！；
返回false；
}
}
}）；
}
}）；
}）；
显然，点击删除按钮，同时将请求发送到背景post.php Ajax会如果成功删除对应的后台传输参数标识和响应的背景处理结果，物品，提示用户删除成功，并通过删除（）的数据项删除，如果失败，提示操作失败。
背景post.php接收参数，并做出相应的处理：
case'del： / /删除项目
ID =美元美元_post { 'id' }；
为查询= mysql_query（删除从催化剂的CID = 。$id）；
如果（$查询）{
回声1；
其他{ }
2的回声；
}
打破；
代码的上面部分，添加到post.php switch语句，执行DELETE语句和输出的前端处理的执行结果。
篇幅有限，在本文中对操作的修改在下一个解释中，请注意，千万不要错过。