Javascprit Form form submission validation and Ajax return JSON

1. Today to do a cell phone verification code to verify the function. Demand is the front-end page Click to send SMS verification code, background received through Ajax back to the front, then the front end at the time of submission verification. The idea is simple, but the process of doing it is to learn a lot of things,

1.ajax return after request

Returning 405 Method not allowed

The reason is that when I returned in the background, I did not add:

@ResponseBody
Annotations. The data returned after the addition is a JSON string, but JS can only manipulate JSON objects. The JSON string needs to be converted to a JSON object.
In general there are three ways
1.json.parse ();

var json = ' {' key ': ' Value ', ' Jian ': ' Zhi '} '; var obj =json.parse (JSON); Console.log (obj); The console returns an Object console.log (Obj.key); Console returns value Console.log (Obj.jian); Console return  

2. Pass the Eval function such as:

<script type= "Text/javascript" >    var json = ' {' key ': ' Value ', ' Jian ': ' Zhi '} ';    var obj = eval ("(" + JSON + ")");    Console.log (obj);         The console returns an  Object    console.log (obj.key);     Console returns  value    Console.log (Obj.jian);    Console return  zhi</script>

The difference is that the Evel method executes the code in the JSON string. For example, the value below will return 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. Invoke the $.parsejson (string) of jquery;

Reference: http://blog.csdn.net/qq_31655965/article/details/52037197

2.form form validation before submission.

If the form form is a submit, the submit will be submitted directly without validation. Then search the Internet a lot, say is the default submit is directly submitted, you can use the button instead of the onclick

This.form.submit (); 　　Submit Form This.form.onsubmit () directly; Call form's OnSubmit method this.form.fireEvent (' onsubmit '); Ditto

　　

<form action= "http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method= "Post" Name= "Form1" onsubmit = "return alert (' Submitted! ‘); 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" > bar code </td>             <td><input style= "width:90%" type= "text" name= "Goodsnum"   size= "" "  maxlength=" 8 "></td >         </tr>         <tr>             <td align= "center" colspan= "2" >                 <input type= "button" Name= " Save "value=" saves "onclick=" if (Confirm (' OK to commit? ')) This.form.submit (); " />             </td>         </tr>      

And then self-test found that this method is not possible, although the pre-verification can be submitted, but after the validation, found that the submission did not respond ...

Reference: http://www.cnblogs.com/jiechn/p/3979433.html

And then you re-use jquery to come down and find out.

$ (document). Ready (function ()     {         $ (' #next '). Click (function ()         {             var code = $ ("#verifyCode"). Val ();             if (code = = NULL | | code = = ") {                 alert (" Please enter phone verification code ");                 return false;             } else if (Vcode = = NULL  | | vcode = = "") {                 alert ("Please send phone verification code");                 return false;             } else if (code! = Vcode) {                 alert ("Incorrect Captcha");                 return false;             }             $ (' #form1 '). Submit ();         });     

　　

<input type= "button" id= "Next"  value= "Next" id= "Next" style= "Background-color: #ff2e2e; height:100px;  width:100%; " />

It is possible to do this in a pro test.

Javascprit Form form submission validation and Ajax return JSON