主要依赖三个按钮:新增,删除,编辑

新增:点击时创建新的LI或者TR并append到父级里,此时无需调动后台接口(如果新增需要弹窗输入val则可以调用);

删除:判断this是否有后台传过来的id值,如果没有,则为新增的,可直接删除;如果有,则需要将Id值传给后台,后台删除记录后前端再把Li给remove了;

确定(或者编辑):获取所有的input的val值,判断:如果没有id值,为新增,放到数组1并调用后台add新增接口;如果有id并且val发生改变(需要预先保存原值并进行比较)则放到数组2调用edit接口。由于ajax实现数据传输是异步的,所以不能保证新增接口调用完了才执行编辑接口,此时可定义一个变量,值为2个数组的个数之和,循环一次,变量-- ,当变量为0时,代表数据传输结束。

记录一下前端ajax实现增删改功能的步骤的更多相关文章

  1. ajax参考增删改查

    AJAX做增删改查详细!   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  2. 前端的CRUD增删改查的小例子

    前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> & ...

  3. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  4. MVC中的Ajax与增删改查

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  5. MVC中的Ajax与增删改查(一)

    自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...

  6. MVVM架构~knockoutjs与MVC配合,实现列表的增删改功能

    返回目录 MVC与MVVM的模型 在MVC实例项目中,为我们提供了简单的增删改查功能,而这种功能的实现与具体的Model很有关系,或者说它与后台数据库的关系过于紧密了,而对于开发人员来说当页面布局修改 ...

  7. ztree : 增删改功能demo与自定义DOM功能demo的结合

    最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把 ...

  8. .NET MVC+ EF+通用存储过程实现增删改功能以及使用事物处理

    引摘: 1.EF对事务进行了封装:无论何时执行任何涉及Create,Update或Delete的查询,都会默认创建事务.当DbContext类上的SaveChanges()方法被调用时,事务就会提交, ...

  9. datatables 前端表格插件 增删改查功能

    官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...

随机推荐

  1. left4dead2 常用配置

    难度控制 z_difficulty [Easy, Normal, Hard, Impossible]

  2. 利用MacBook Air入侵无线网络

    目前无线网络的加密方式主要有WEP,WPA/WPA2.这是最常看到的加密方式,最近由于需要,专门去研究了一下如何入侵无线网络. 1.入侵WEP加密的无线网络 WEP加密方式现在已经很不安全了,因为只要 ...

  3. [P1860]新魔法药水

    题目描述 商店里有N种药水,每种药水都有一个售价和回收价.小S攒了V元钱,还会M种魔法,可以把一些药水合成另一种药水.他一天可以使用K次魔法,问他一天最多赚多少钱? 输入输出格式 输入格式: 第一行四 ...

  4. 初入spring boot(八 )Spring Data REST

    1. 什么是Spring Data REST Spring Data JPA是基于Spring Data 的Repository之上,可以将Repository自动输出为REST资源.目前Spring ...

  5. STL map用法总结(multimap)

    2017-08-19 10:58:52 writer;pprp #include <map> #include <string> #include <iostream&g ...

  6. Dropping water balloons (入门dp)

    2017-08-12 18:36:24 writer:pprp 最近刚刚接触动态规划,感觉状态的查找和转移自己很难想到,都是面向题解编程,但是一开始都是这样了,只有相信我可以独立自己解决动态规划这类问 ...

  7. Java高级面试题

    一.基础知识: 1)集合类:List和Set比较,各自的子类比较(ArrayList,Vector,LinkedList:HashSet,TreeSet): 2)HashMap的底层实现,之后会问Co ...

  8. linux基础之Vim

  9. CentOS 7添加应用快捷方式到桌面

    以eclipse为例,编辑下面文件,复制到桌面即可. vi client.desktop [Desktop Entry]Encoding=UTF-8Name=eclipseExec=/home/clo ...

  10. layui弹窗宽度固定高度自适应界面

    //默认上下15px的边距高度,可根据需要修改function layuiDialogFitScreen(){ var layui_title_height=$(window.parent.docum ...