javascprit form表單提交前驗證以及ajax返回json

標籤：obj   eve   pac   idt   value   overflow   alert   親測   amp   

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

　　親測這種方式可以。

javascprit form表單提交前驗證以及ajax返回json