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

新增:点击时创建新的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. 20144303 《Java程序设计》第七周学习总结

    20144303 <Java程序设计>第七周学习总结 教材学习内容总结 第十二章 Lambda Lambda表达式中this的参考对象以及toString()的接受者,是来自Lambda的 ...

  2. Jenkins 集成Ansible教程

    前提条件: 1. 部署Jenkins Server 2. 部署 Ansible Server 一.在Jenkins安装SSH插件 系统管理 -> 插件管理 二.在Jenkins 凭证中添加Ans ...

  3. openwrt下如何只编译uboot

    答:如使用以下命令编译nxp的layerscape系列芯片相关的uboot: make package/boot/uboot-layerscape/prepare make package/boot/ ...

  4. 如何使用curl进行网页授权

    答:使用curl的-u选项,使用方法如下 curl -u username URL (会提示输入密码)

  5. [BZOJ]BST again

    Description 求有多少棵大小为n的深度为h的二叉树.(树根深度为0:左右子树有别:答案对1000000007取模) Input 第一行一个整数T,表示数据组数. 以下T行,每行2个整数n和h ...

  6. Spring容器基础ClassPathXmlApplicationContext(一起看源码)

    ApplicationContext相比较于BeanFactory,扩展了很多功能.也就是说前者包含了后者的所有功能.使用前者加载XML的方式:ApplicationContext app=new C ...

  7. Linux升级内核总结

    Linux内核升级总结. 一.编译内核步骤 1.#uname –r 确定系统的原内核版本,然后下载较新版本的Linux内核源码包 http://www.kernel.org/pub/linux/ker ...

  8. 动态规划dp专题练习

    貌似开坑还挺好玩的...开一个来玩玩=v=... 正好自己dp不是很熟悉,就开个坑来练练吧...先练个50题?小目标... 好像有点多啊QAQ 既然是开坑,之前写的都不要了! 50/50 1.洛谷P3 ...

  9. Python学习札记(一) 初始python

    参考: 廖雪峰教程:Python简介 笔记 1.C语言是可以用来编写操作系统的贴近硬件的语言,所以,C语言适合开发那些追求运行速度.充分发挥硬件性能的程序.而Python是用来编写应用程序的高级编程语 ...

  10. 不一样的入门:看C# Hello World的17种写法

    摘要:本文针对不同阶段.不同程度的C#学习者,介绍了C# Hello World的17种不同写法,希望会对大家有所帮助.(C# Hello World写法入门.C# Hello World写法进阶.C ...