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

Posted 2020-08-07 Runlin

 主要依赖三个按钮：新增，删除，编辑

 

新增：点击时创建新的LI或者TR并append到父级里，此时无需调动后台接口（如果新增需要弹窗输入val则可以调用）；

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

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