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

新增:点击时创建新的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. 输入n,求1~n累加

    最开始可能会使用for循环来计算,现在直接使用等差数据计算和公式:s=(a0+n)*n/2 long sum(int n) { long ret=0: ret = (1+n)* n /2: retur ...

  2. KVM配置及维护

    kvm使用场景 1.公司测试环境/开发环境 测试开发环境可以使用配置低点的物理机就可以 2.公司生产环境 一般小公司没有私有云或容器团队,运维人员可能就1-2个,然后公司也不舍得花钱买商业化的私有云. ...

  3. mybatis动态sql中的sql标签——抽取可重用的sql片段

    1.用<sql>标签抽取可重用的sql片段 <!-- 抽取可重用的SQL片段,方便后面引用           1.sql抽取,经常将要查询的列名,或者插入用的列名,之后方便引用   ...

  4. UVa 11038 有多少个0

    https://vjudge.net/problem/UVA-11038 题意: 输入两个非负整数m和n,求将m~n的所有整数写出来,一共要写多少个数字0? 思路: 举个例子来说: 12345 从右到 ...

  5. Elasticsearch6.0之二:常用语句

    // 查看集群状态 GET /_cluster/health?pretty // 查看所有索引配置信息 Get _all/_settings // 查看所有索引状态 GET /_cat/indices ...

  6. 使用@media screen解决移动web开发的多分辨率问题

    当今移动设备的发展已经越来越迅速,移动web开发的需求也越来越多多.许多大平台.大门户都纷纷推出了自己的移动web版网站. 随着移动设备飞速的发展,移动产品的屏幕规格越来越多.从几年前的320×240 ...

  7. Android----Material Design之(FloatActionButton,CoordinatorLayout,CollapsingToolbarLayout,AppBarLayout,TabLayout等)

    Material Design 的一些UI 平常开发还是用的比较多的,以前没写,最近总结一下,写一篇博客,要求版本在5.0以上. 主要介绍了FloatActionButton,CoordinatorL ...

  8. Calendar时间获取天,周,月,季度,年度时间段

    Date类 Date类的大多数构造函数和方法都已经抛弃,只留下和毫秒有关的操作,目前常用的构造函数 常用方法 设置毫秒数 读取毫秒数 toString()打印结果 //创建日期对象,把当前的毫秒值转成 ...

  9. pandas dataframe在指定的位置添加一列, 或者一次性添加几列,re

    相信有很多人收这个问题的困扰,如果你想一次性在pandas.DataFrame里添加几列,或者在指定的位置添加一列,都会很苦恼找不到简便的方法:可以用到的函数有df.reindex, pd.conca ...

  10. canvas图形的组合与裁切

    当两个或两个以上的图形存在重叠区域时,默认情况下一个图形画在前一个图像之上.通过指定图像globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式,globalAlpha ...