记录一下前端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 ...
随机推荐
- Hive表的修改Alter
1.查看创建表的信息 [show create table] hive> show create table student; OK createtab_stmt CREATE TABLE `s ...
- [HAOI2015]T2
[题目描述] 有一棵点数为N的树,以点1为根,且树点有边权.然后有M个操作,分为三种: 操作1:把某个节点x的点权增加a. 操作2:把某个节点x为根的子树中所有点的点权都增加a. 操作3:询问某个节点 ...
- ISSCC 2017论文导读 Session 14 Deep Learning Processors,A 2.9TOPS/W Deep Convolutional Neural Network SOC
最近ISSCC2017大会刚刚举行,看了关于Deep Learning处理器的Session 14,有一些不错的东西,在这里记录一下. A 2.9TOPS/W Deep Convolutional N ...
- RedHat7.4最小化安装没有ifconfig命令
软件环境 VirtualBox 5.2.8 rhel-server-7.4-x86_64-dvd.iso 系统环境 Win10 64 位 8G内存 最小化安装了RedHat7.4之后,进入系统之后使用 ...
- centos7下使用yum安装mysql数据库
CentOS7的yum源中默认是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载并安装MySQL官方的 Yum Repository wget -i -c http: ...
- Flume NG初次使用
一.什么是Flume NG Flume是一个分布式.可靠.和高可用性的海量日志采集.聚合和传输的系统,支持在日志系统中定制各类数据发送方,用于收集数据:同时Flume提供对数据的简单处理,并写到各种数 ...
- 07_MySQL DQL_多表查询_等值内连接
#6:连接查询/*含义:多表查询,当查询的字段来自多个表 笛卡尔积: 表1,m行:表2,n行: 表1,表2 = m*n行发生原因:表1的每行和表2的n行拼接,形成n行,最终得到m*n行如何避免:增加连 ...
- IO模型详解
IO编程包括: 文件读写 操作 StringIO 和 BytesIO 内存中 操作文件和目录 OS 序列化 json pickling 操作系统内核空间(缓冲区)收发数据: 内核态(内核空间)---- ...
- Dive into Spring framework -- 了解基本原理(二)--设计模式-part1
比较巧,自己在接触设计模式的时候,也刚开始学习spring,但可惜的是,真的仅仅在学习“用”spring,每天都沉浸在会痛快的完成spring各种配置的快乐之中,但对成长无用.其实当初就清楚,spri ...
- Apache 2 移植到Arm开发板
第一步,安装pcre: tar -xvzf pcre-8.31.tar.gz cd pcre-8.31 ./configure --prefix=$ARMROOTFS/usr/pcre 的错误,如下图 ...