javascprit form表单提交前验证以及ajax返回json
2017-06-18 12:33
555 查看
1.今天要做一个手机验证码验证的功能。需求是前端页面点击发送 短信验证码,后台接收后通过ajax返回到前端,之后前端在提交时候进行验证。思路很简单,不过做的过程还是学到不少的东西、
1.ajax请求后返回
2.通过eval 函数 如:
二者区别是evel方法 会执行json字符串里的代码。比如下面的value 会返回2
3.调用jquery的 $.parseJSON(string);用法同上。
参考:http://blog.csdn.net/qq_31655965/article/details/52037197
2.form表单提交前验证。
如果form表单是submit,则submit时候会直接提交,而不会验证。然后网上搜了很多,说是默认的submit是直接提交,可以使用button来代替onclick
然后自己测试后发现这种方式不行,虽然可以再提交前验证,但是当验证过了之后,发现提交没反应了。。。
参考:http://www.cnblogs.com/jiechn/p/3979433.html
然后又重新用jquery来下了下发现可以。
亲测这种方式可以。
1.ajax请求后返回
returning 405 Method Not Allowed
原因是我后台返回的时候没有加上:@ResponseBody 注解。加上后返回的数据是json字符串,但是js只能操作json对象。需要把json字符串转为json对象。 一般的有三种方式 1.JSON.parse();如
var json = '{"key":"value","jian":"zhi"}'; var obj =JSON.parse(json); console.log(obj); //控制台返回 Object console.log(obj.key); //控制台返回 value console.log(obj.jian); //控制台返回
2.通过eval 函数 如:
<script type="text/javascript"> var json = '{"key":"value","jian":"zhi"}'; var obj = eval("(" + json + ")"); console.log(obj); //控制台返回 Object console.log(obj.key); //控制台返回 value console.log(obj.jian); //控制台返回 zhi </script>
二者区别是evel方法 会执行json字符串里的代码。比如下面的value 会返回2
var value = 1; var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}'; var json2 = JSON.parse(jsonstr); console.log(json2); console.log('value: '+ value);
3.调用jquery的 $.parseJSON(string);用法同上。
参考:http://blog.csdn.net/qq_31655965/article/details/52037197
2.form表单提交前验证。
如果form表单是submit,则submit时候会直接提交,而不会验证。然后网上搜了很多,说是默认的submit是直接提交,可以使用button来代替onclick
this.form.submit(); //直接提交表单 this.form.onsubmit(); //调用form的onsubmit方法 this.form.fireEvent('onsubmit'); //同上,
<form action="http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method="post" name="form1" onsubmit="return alert('已提交!'); return false;"> <table align="center" width="420px" cellPadding="2" cellSpacing="1" bgcolor="#A4B6D7" style="word-wrap:Break-word;"> <tr style="cursor: hand;background:#d7e3f6" > <td width="20%" align="right">条型码</td> <td><input style="width:90%" type="text" name="GOODSNUM" size="30" maxlength="8" ></td> </tr> <tr> <td align="center" colspan="2"> <input type="button" name="save" value="保存" onclick="if((confirm('确定要提交吗?'))) this.form.submit();"/> </td> </tr> </table> </form>
然后自己测试后发现这种方式不行,虽然可以再提交前验证,但是当验证过了之后,发现提交没反应了。。。
参考:http://www.cnblogs.com/jiechn/p/3979433.html
然后又重新用jquery来下了下发现可以。
$(document).ready(function () { $('#next').click(function() { var code = $("#verifyCode").val(); if(code == null || code == ""){ alert("请输入手机验证码"); return false; }else if(vcode == null || vcode == "") { alert("请发送手机验证码"); return false; }else if(code != vcode){ alert("验证码不正确"); return false; } $('#form1').submit(); }); });
<input type="button" id="next" value="下一步" id="next" style="background-color:#ff2e2e; height:100px; width:100%;"/>
亲测这种方式可以。
相关文章推荐
- spring security的ajax提交和json返回数据--兼容form表单提交
- jquery序列化form表单使用ajax提交后处理返回的json数据
- jquery序列化form表单使用ajax提交后处理返回的json数据
- jquery序列化form表单使用ajax提交后处理返回的json数据
- 手机号验证,为jquery-validation添加自定义验证方式,以及Ajax提交form表单
- jquery序列化form表单使用ajax提交后处理返回的json数据
- Form表单利用Jquery Validate验证以及ajax提交
- form表单submit提交时,用ajax做异步验证
- onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- JQuery Form Ajax提交Asp.Net表单时的验证视图状态 MAC 失败
- easyui使用Ajax提交表单,返回Json数据
- jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解
- form表单的ajax提交【组装json】
- 表单序列化,jq中的serialize,ajax提交整个form表单,无需逐个拼写json
- FormData收集表单信息&并且转化为Json格式进行提交验证
- JS 提交表单2-Query Ajax post(json数组,form表单经serialize()序列化,html拼接)
- (一)jquery做ajax表单提交以及字段验证
- easyui使用Ajax提交表单,返回Json数据
- DEDE使用AJAX无刷新提交Form表单,PHP返回结果