总结骏汇项目的一些js逻辑问题(一)之数据提交
2017-09-01 09:31
441 查看
之前就一直想要总结一下项目里面遇到的js问题,但是因为项目一直在跟进,有些内容其实也一直没有考虑全面,现在确实是项目已经结束,所以特来总结一下自己的在项目里面遇到的一些逻辑问题并总结一些简单轻便的js写法。
首先说一下数据提交的问题,所谓的数据提交就是用ajax请求吧需要传的参数带给请求的url,我建议当传的参数比较多的时候,不要一个一个地传,而是直接定一个param,把你所需要的参数放进去。当然请求的方法我一点也不建议用原生的,建议还是封装一下再用。还有一个问题就是当我要传一个数组对象的时候,不要一个一个地去得,而是用下each方法,把html里面的数据取出来之后,在外面定义一个数组对象,然后把取出来的内容存到变量里面去,然后每次循环都把这个变量存到数组对象中去,这样就可以得到一个数组对象了。下面还是用代码来解释一下我上面所说的这个问题。
然后说一下数据提交之前的前端验证的问题,一般情况下如果用validate.js那么验证的时候想要得到最后的验证值,直接return validate验证的那个方法
的返回值就可以了,但是如果是手写的方法,那么我们就把所有的方法的返回值都并起来就能得到验证的值了。当然有人会问如果又要用到validate.js,又要用到自己手写的方法
怎么办,我想说也许没有这么麻烦,因为比较难的方法在validate.js里面都可以自定义,所以验证内容的多少决定了我们用哪种方法。下面我就分别用validate和手写方法得到验
证结果判断是否数据提交。
首先说一下数据提交的问题,所谓的数据提交就是用ajax请求吧需要传的参数带给请求的url,我建议当传的参数比较多的时候,不要一个一个地传,而是直接定一个param,把你所需要的参数放进去。当然请求的方法我一点也不建议用原生的,建议还是封装一下再用。还有一个问题就是当我要传一个数组对象的时候,不要一个一个地去得,而是用下each方法,把html里面的数据取出来之后,在外面定义一个数组对象,然后把取出来的内容存到变量里面去,然后每次循环都把这个变量存到数组对象中去,这样就可以得到一个数组对象了。下面还是用代码来解释一下我上面所说的这个问题。
//封装ajax请求的方法 function sendReq(url, param, callback, failCallback) { $.ajax({ type: "post", url: url + "?" + (new Date().getTime()), data: param, contentType: "application/x-www-form-urlencoded", dataType: "json", success: function (result) { callback && callback(result); }, error: function (e) { failCallback && failCallback(); } }); } //ajax请求参数 var requestParam = { name: $.trim($("#name").val()), age: $.trim($("#age").val()), lovesRules:[] }; $("#loves .subRule").each(function(){ var info = $(this); var item = {}; item.run = $.trim(info.find("input[name='run']").val()); item.swim = $.trim(info.find("input[name='swim']").val()); item.play = $.trim(info.find("input[name='play']").val()); requestParam.lovesRules.push(item); }); //ajax请求调用 sendReq("/Account/Add", requestParam, function (result) {}, function() {});
然后说一下数据提交之前的前端验证的问题,一般情况下如果用validate.js那么验证的时候想要得到最后的验证值,直接return validate验证的那个方法
的返回值就可以了,但是如果是手写的方法,那么我们就把所有的方法的返回值都并起来就能得到验证的值了。当然有人会问如果又要用到validate.js,又要用到自己手写的方法
怎么办,我想说也许没有这么麻烦,因为比较难的方法在validate.js里面都可以自定义,所以验证内容的多少决定了我们用哪种方法。下面我就分别用validate和手写方法得到验
证结果判断是否数据提交。
submitForm(); submitFormNext(); //表单验证 function initFormValidate(){ return $("#Form").validate({ onfocusout:function(element){$(element).valid();}, onkeyup:function(element,event){ //去除左侧空格 var value = this.elementValue(element).replace(/^\s+/g, ""); $(element).val(value); }, rules:{ name:{required:true} }, messages:{ name:{required:"请填写您的姓名"} } }); } //validate验证 数据是否提交 function submitForm(){ if(!initFormValidate().form()){ return false; } //数据提交 } //普通方法验证 数据是否提交 function submitFormNext(){ var verifyVal = verifyName(); verifyVal = verifyAge() && verifyVal; if(!verifyVal){ return false; } //数据提交 } function verifyName(){ var name = $.trim($("#name").val()); if(!name){ $("#name").parents(".sub-input-box").find(".error").show().html("请填写您的姓名"); return false; }else{ return true; } } function verifyAge(){ var age = $.trim($("#age").val()); if(!age){ $("#age").parents(".sub-input-box").find(".error").show().html("请填写您的姓名"); return false; }else{ return true; } }
相关文章推荐
- 总结骏汇项目的一些js逻辑问题(二)之添加意向银行并可排序
- 总结骏汇项目的一些js问题(四)之公司中文名称与公司英文名称之提交
- Kindeditor通过JS提交获取不到数据问题.
- 项目中遇到的一些前后台数据交互小问题
- 用JS验证表单数据时的提交问题
- AFN中POST请求提交数据的方式及一些问题
- 解决ssm项目表单数据提交到数据库乱码问题
- 通过JS向表单中增加元素后提交无法获取数据问题的解决。
- 由于要开发新的项目,node.js写下一些问题帮助自己记忆,也希望能帮助到别人
- js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题
- j2ee的web项目怎么防止,重复提交的问题?(即点击了提交,后台新增了两条数据,也就是说,其实是点了多次提交,发起了多次http url,这样就插入了多条相同数据,但是主键id是不同的)
- 【Web前端】Vue.js 项目中遇到的一些问题汇总
- [学习笔记][ASP.NET2.0][点击asp:Button出现两次提交数据的问题][解决:去掉OnClick或者OnCommand属性]
- 项目中遇到的一些小问题及解决方法
- TOP N的一些问题,可以实现取得表中最大的一行ID的数据。
- FORM表单提交大量数据溢出问题
- TOP N的一些问题,可以实现取得表中最大的一行ID的数据。
- 解决刷新页面造成的数据重复提交问题
- SubmitOncePage:解决刷新页面造成的数据重复提交问题
- 一个关于 客户端非法取消正在进行的数据提交操作 的问题 的讨论