记录一下前端ajax实现增删改功能的步骤

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

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

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

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

时间: 2024-08-07 08:40:19

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

可编辑ztree节点的增删改功能图标控制---已解决

<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRemove / onRemove / beforeRename / onRename</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <l

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

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

vue 简单的增删改功能

刚开始学习vue ,简单的练习了一下,就写了一个简单的dome ,里面包括 增加,删除 ,修改功能 . <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable

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

前端的CRUD增删改查的小例子 1.效果演示 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 300px; margin: 0 auto; } ul{

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

最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把demo改了一下,两个功能合在了一起. 上代码. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - edit</TITLE> <meta http-equiv="content-ty

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

官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> <!-- jQuery --><script type="

Python学习第二十二课——Mysql 表记录的一些基本操作 (增删改)

记录基本操作: 增:(insert into) 基本语法: insert into 表名(字段) values(对应字段的值): 例子1: insert into employee(id,name,age,salary) values(1,"憨憨",24,5000); 指定添加insert into employee values(2,"憨憨",0,24,"技术部",5000); 对应添加 insert into employee set nam

MVC中的Ajax与增删改查(二)

上一篇记录的是前台操作,下面写一下后台 ,本来自认为是没有必要做补充,毕竟思路啥的都有,实际上在做删除操作的时候,折腾了一天,还是自己太嫩,逻辑不够严谨,这里作下记录. 关于表结构这里再作下说明: ①表A是三个联合主键,key1,key2,... ②表B是四个联合主键 key1,key2,key3,... ③A表主键是B表外键 ④A,B表的某个栏位的描述信息都来自语言表C ⑤C表联合主键(TableName,TableKey,Language,Desc,...) ⑥如果记录A表描述信息: Tab

AJAX普通增删改查

引用文件 <link href="~/BootstrapSouce/css/bootstrap.css" rel="stylesheet" /><script src="~/BootstrapSouce/js/bootstrap.min.js"></script><script src="~/BootstrapSouce/js/jquery.min.js"></script