记录一下前端ajax实现增删改功能的步骤
主要依赖三个按钮:新增,删除,编辑
新增:点击时创建新的LI或者TR并append到父级里,此时无需调动后台接口(如果新增需要弹窗输入val则可以调用);
删除:判断this是否有后台传过来的id值,如果没有,则为新增的,可直接删除;如果有,则需要将Id值传给后台,后台删除记录后前端再把Li给remove了;
确定(或者编辑):获取所有的input的val值,判断:如果没有id值,为新增,放到数组1并调用后台add新增接口;如果有id并且val发生改变(需要预先保存原值并进行比较)则放到数组2调用edit接口。由于ajax实现数据传输是异步的,所以不能保证新增接口调用完了才执行编辑接口,此时可定义一个变量,值为2个数组的个数之和,循环一次,变量-- ,当变量为0时,代表数据传输结束。
记录一下前端ajax实现增删改功能的步骤的更多相关文章
- ajax参考增删改查
AJAX做增删改查详细! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 前端的CRUD增删改查的小例子
前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...
- vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- MVC中的Ajax与增删改查
自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...
- MVC中的Ajax与增删改查(一)
自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...
- MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能
返回目录 MVC与MVVM的模型 在MVC实例项目中,为我们提供了简单的增删改查功能,而这种功能的实现与具体的Model很有关系,或者说它与后台数据库的关系过于紧密了,而对于开发人员来说当页面布局修改 ...
- ztree : 增删改功能demo与自定义DOM功能demo的结合
最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把 ...
- .NET MVC+ EF+通用存储过程实现增删改功能以及使用事物处理
引摘: 1.EF对事务进行了封装:无论何时执行任何涉及Create,Update或Delete的查询,都会默认创建事务.当DbContext类上的SaveChanges()方法被调用时,事务就会提交, ...
- datatables 前端表格插件 增删改查功能
官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...
随机推荐
- 20135302魏静静——linux课程第五周实验及总结
linux课程第五周实验及总结 一.学习总结 给MenuOS增加time和time-asm命令(四步操作命令) rm menu -rf 强制删除git clone http://github.com/ ...
- jz2440使用openjtag+openocd+eclipse调试【学习笔记】
平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 说明:韦东山二期视频学习笔记 交叉编译工具:arm-linux-gcc (GCC) 3.4.5 eclipse版本:eclipse-cpp-l ...
- MySQL表损坏修复【Incorrect key file for table】
今天机房mysql服务器异常关机,重新启动后报错如下: -- :: [ERROR] /usr/local/mysql/bin/mysqld: Incorrect key file for table ...
- bootstrap && bagging && 决策树 && 随机森林
看了一篇介绍这几个概念的文章,整理一点点笔记在这里,原文链接: https://machinelearningmastery.com/bagging-and-random-forest-ensembl ...
- 最短路径 bellman-ford
初始化:将除源点外的所有顶点的最短距离估计值 d[v] ←+∞, d[s] ←0 迭代求解:反复对边集E中的每条边进行松弛操作,使得顶点集V中的每个顶点v的最短距离估计值逐步逼近其最短距离:(运行|v ...
- 统计tophat map上的read数量
samtools flagstat /SRA111111/SRR111222/accepted_hits.bam 78406056 + 0 in total (QC-passed reads + QC ...
- Sublime使用记录之SublimeServer插件介绍
Sublime使用记录之SublimeServer插件介绍 介绍:sublimeServer
- 【cs231n】最优化笔记
): W = np.random.randn(10, 3073) * 0.0001 # generate random parameters loss = L(X_train, Y_train, W) ...
- spring 及 spring boot 资源文件配置
Spring配置文件引入xml文件: <import resource=" " />标签使用总结 https://www.cnblogs.com/javahr/p/83 ...
- centos 6 安装python2.7和pip
由于scrapy1.0的发布,想在Linux上测试,所以安装了centos6.6:但是它的python版本为2.6,很多东西都不支持,所以需要升级为2.7: 首先是在window7上安装虚拟机,然后安 ...