vue实战:利用vue与ajax实现增删改查
Posted _林冲
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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.w3.org/TR/html4/loose.dtd"> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta http-equiv="Expires" content="0"> <meta http-equiv="Cache-Control" content="no-cache"> <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.min.css"> <script type="text/javascript" src="${ctxStatic}/js/jquery.min.js"></script> <script type="text/javascript" src="${ctxStatic}/js/bootstrap.min.js"></script> <script type="text/javascript" src="${ctxStatic}/js/common.js"></script> <script type="text/javascript" src="${ctx}/static/js/vue.js"></script> <script type="text/javascript"> var getUrl=‘${ctx}/distributor/getRate‘; var saveUrl= ‘${ctx}/distributor/saveRate‘; var rate = []; var vm ; var rates =‘‘; $.ajax({ url : getUrl, async : false, dataType: ‘json‘, success: function(data2){ rate = data2; } }); console.log(rate); $(function(){ vm = new Vue({ el: "#app", data: { rates : rate, newRate:{ startMoney:‘‘, endMoney:‘‘, rate:‘‘ }, myShow:false } , methods: { saveRate: function(){ rates = JSON.stringify(this.rates); console.log(rates); $.ajax({ url: saveUrl, dataType: ‘json‘, type: ‘post‘, data:{ rate:rates }, success:function(data){ console.log(data) }, error:function(err){ console.log(err) } }) }, delRate: function(e){ var that = e.currentTarget; console.log(e.currentTarget); delId = that.id this.rates.splice(delId,1); }, addRate: function() { this.myShow =true; console.log(this.rates); }, sureRate :function() { this.myShow = false; //隐藏输入框 rates = this.rates; newRate = this.newRate; var newStartMoney = parseInt(newRate.startMoney); //输入的开始金额 var newEndMoney = parseInt(newRate.endMoney);// 输入的结束金额 var new_rate = parseInt(newRate.rate); // 输入的返佣比例 if(rates.length == 0){ //当一行数据都没有的时候 if(newStartMoney > newEndMoney){ alert("输入的startmoney必须小于endMoney"); return false; }else if(new_rate <= 0 || new_rate >1){ alert("返佣比例必须在0到1之间") return false; }else{ var newRate2 ={ startMoney: newRate.startMoney, endMoney: newRate.endMoney, rate: newRate.rate } rates.push(newRate2); } }else{ //有数据的时候 var beforeEndMoney = parseInt(rates[rates.length-1].endMoney); //前一项的结束金额 if(newStartMoney < beforeEndMoney){ alert("开始金额必须大于等于前一项的结束金额"); return false; }else if(newStartMoney > newEndMoney){ alert("开始金额必须小于结束金额"); return false; }else if(new_rate <= 0 || new_rate >1){ alert("返佣比例必须在0到1之间") return false; } else{ var newRate2 ={ //定义一个新的对象赋值,如果直接写 newRate2 = newRate的话，newRate2 其实只是一个相当于指针的东西,只是指向了newRate的值，如果newRate的值改变了，newRate2也会改变。 startMoney: newRate.startMoney, endMoney: newRate.endMoney, rate: newRate.rate } rates.push(newRate2); } } // 将输入框对象的值都设置为空,为下一次输入作准备 this.newRate.startMoney = ‘‘; this.newRate.endMoney = ‘‘; this.newRate.rate = ‘‘; } } }); }); </script> <style> </style> <body id="app"> <table> <thead> <tr> <th colspan="3">订单金额区间(元)</th><th colspan="1">返佣比例(%)</th><th>操作</th> </tr> </thead> <tbody> <tr v-for="rate in rates"> <td>{{rate.startMoney}}</td> <td>~</td> <td>{{rate.endMoney}}</td> <td>{{rate.rate}}</td> <td><button @click = "delRate" id="{{$index}}">删除</button></td> <!-- 这里的index索引方法要注意 --> </tr> <tr v-show="myShow"> <td><input type="text" v-model="newRate.startMoney"></td> <td>~</td> <td><input type="text" v-model="newRate.endMoney"></td> <td><input type="text" v-model="newRate.rate"></td> <td><button @click = "sureRate">确定</button></td> </tr> </tbody> </table> <button @click="addRate">新增</button> <button @click="saveRate">保存</button> </body> </html>
本次项目的注意点:
1:ajax 的使用不熟练
2:删除方法，可以使用索引，为每一行设置一个id属性值，然后删除总数据id属性值的那个项。
3：在新增项中，要注意js中，例如a=b中 "=" 其实相当于一个指针，当b的值变化时，a也会改变(a其实并没有值)，这个时候我们要将a的具体属性值都要设置才行。
以上是关于vue实战:利用vue与ajax实现增删改查的主要内容，如果未能解决你的问题，请参考以下文章