使用ajax对界面数据删除,用ajax对数据进行删除和查看

1.在主体中写表的开头行，想要显示的内容，并且加载数据也要显示的地方也建张表

如图：

2.显示数据：用ajax方法遍历一张表，显示出表的内容

如图：

3.显示数据的处理页面

上面用到的封装的转换字符串的方法

4.步骤2中的执行处理页面结束的语句编写：

数据的显示效果，删除和查看时将操作一栏修改并且加入按钮的触发事件就可以了：需要修改的代码就是“操作”这一列：

一、数据的删除处理

1.在循环数据库的时候，在最后的一个单元格中添加删除按钮，然后就是起个名字便于对其添加数据，写个主键值

2.对删除按钮添加事件

3.调用ajax方法，ajax里的步骤

4.接下来写删除的处理页面，这个页面写过很多次了

5.返回调用的ajax中开始写成功后的代码

6.这样就可以完成对数据的删除了

(原数据图)

(随便删除一条数据图)

二、查看数据

点击查看数据，会弹出数据详情的窗口

1.既然是详情，那么修改上面所讲的那一句语句就可以：在操作的那添加个按钮，传一个主键值，删除时肯定是用代号来进行查看，因为代号没有重复的

起一个名字，然后传一个主键值

2.想要显示的可以少一点，可以只显示名称和操作，这两列

对于ajax的遍历时将div也写成两个

效果如图：

注意：这里的对添加窗口有两种方法，一个是用自己写好的封装类，二是可以用bootstrap的弹窗

一是用自己写好的封装类

3.1 对“详情”进行编写的时候可以使用封装好的弹窗js，引入弹窗js还有弹窗的样式表，应为封装的js语句很多，js显示基本功能如下：

4.1 根据上面的主键值，对详情按钮添加事件

5.1 编写详情的处理页面：就是根据传过去的code找到代号那一列，然后执行就可以，当然是字符串形式的数据，就要进行转换

这是封装类中的字符函数里的：

处理页面的代码编写

最后就是走起来看效果，单击详情按钮后，就会显示窗口了

单击桔子后面的详情按钮，就弹出窗口：

二是用bootstrap的弹窗

3.1首先也要引入bootstrap的js和css包：

3.2在主体部分写入弹窗：直接从bootstrap的官网进行复制粘贴就可以

3.3在进行显示数据时记得在遍历结束时，在详情按钮中加入属性

3.4在详情的单击事件遍历结束后要将内容写入上面的“显示的内容”的地方

这个地方和第一种方法差不多，不同的地方就是第一种方法引入了封装方法，第二种方法是将显示结果交给显示内容的div中

单击桃子后的详情按钮，弹窗效果如下：

删除和查看详情就是以上。