javascprit form表单提交前验证以及ajax返回json

Posted 2020-09-23 Doyourself!

  1.今天要做一个手机验证码验证的功能。需求是前端页面点击发送 短信验证码，后台接收后通过ajax返回到前端，之后前端在提交时候进行验证。思路很简单，不过做的过程还是学到不少的东西、

 

  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%;"/>

　　亲测这种方式可以。