Many frameworks support the interpretation of JSON into a grid or form, with individual preface writing one. The content used is primarily JavaScript traversal of JSON. Such as:
for (Var key in JSON) { alert ("Name:" + key + "value:" + Json[key]); }
and specific to the Web page, there will be some space in the form, which will be specific analysis of the concrete situation, nonsense not to say, post code
varFillform =function($form, JSON) {varJsonobj =JSON; if(typeofJSON = = = ' String ') {Jsonobj=$.parsejson (JSON); } for(varKeyinchJsonobj) {//traversing JSON strings varObjType = Jsonobjtype (Jsonobj[key]);//Get value type if(ObjType = = = "Array") {//if it is an array, it is generally a many-to-many relationship in the database varObj1 =Jsonobj[key]; for(varArraykeyinchobj1) { //alert (Arraykey + Jsonobj[arraykey]); varArrayobj =Obj1[arraykey]; for(varSmallkeyincharrayobj) {setckb (key, Arrayobj[smallkey]); Break; } } } Else if(ObjType = = = "Object") {//if it is an object, everything is fine, in most cases, there will be fields like XXXID as the foreign key table ID } Else if(ObjType = = = "string") {//if it is a string varstr =Jsonobj[key]; varDate =NewDate (str); if(Date.getday ()) {//This judgment date is I lazy, do not want to write code, we use with caution. $ ("[name=" + key + "]", $form). Val (Date.format ("Yyyy-mm-dd")); Continue; } varTAGOBJS = $ ("[name=" + key + "]", $form); if($ (Tagobjs[0]). attr ("type") = = "Radio") {//if the radio control$.each (TAGOBJS,function(keyobj,value) {if($ (value). attr ("val") = =Jsonobj[key]) {value.checked=true; } }); Continue; } $("[name=" + key + "]", $form). Val (Jsonobj[key]); } Else{//Other Direct Assignments$ ("[name=" + key + "]", $form). Val (Jsonobj[key]); } }}varSETCKB =function(name, value) {//Alert (name + "" + value); //$ ("[name=" + name + "][value=" + value + "]"). attr ("Checked", "checked"); I don't know why I can't find a specific label;$ ("[name=" + name + "][val=" + value + "]"). attr ("Checked", "checked");}
View Code
Because the multi-election will have some different ways, no way, can only continue to specific situations specific analysis
varFILLCKB =function(name, JSON) {varJsonobj =JSON; if(typeofJSON = = = ' String ') {Jsonobj=$.parsejson (JSON); } varstr =Jsonobj[name]; if(typeofstr = = = "string") { varArray = Str.split (","); $.each (Array,function(key, value) {setckb (name, value); }); }}
View Code
Seemingly less of a method of judging the type
var jsonobjtype = function (obj) { if (typeof obj = = = = "Object "" { json.stringify (obj); if (teststr[0] = = ' {' && teststr[teststr.length-1] = = '} ') return "class" ; if (teststr[0] = = ' [' && teststr[teststr.length-1] = = '] ') return "Array" ; return typeof obj;}
View Code
The next step is in the HTML.
<! DOCTYPE html> $(function () { $("#btntest"). Click (function() {$.post ("/test2/getjsonstr", {},function(data) {fillckb ("Teammate", data); Fillform ($ ("#fm1"), data); }); }); }); </script>Saviola<input type= "checkbox" class= "Checkbox-inline" name= "Friends" val= "2" value= "2" >Batistuta<input type= "checkbox" class= "Checkbox-inline" name= "Friends" val= "3" value= "3" >Lopez<input type= "checkbox" class= "Checkbox-inline" name= "Friends" val= "4" value= "4" >Veron</div> </div> <div class= "Form-group" > <label class= "Control-lab El col-sm-2 ">Teammate</label> <div class=" col-sm-10 "> <input type=" che Ckbox "class=" Checkbox-inline "name=" Teammate "val=" 1 "value=" 1 ">Van Nistelrooy<input type= "checkbox" class= "Checkbox-inline" name= "Teammate" val= "2" value= "2" >Messi<input type= "checkbox" class= "Checkbox-inline" name= "Teammate" val= "3" value= "3" >Veron<input type= "checkbox" class= "Checkbox-inline" name= "Teammate" val= "4" value= "4" >nedved</div> </div> <div class= "Form-group" > <label class= "Control-lab El col-sm-2 ">Position</label> <div class=" col-sm-10 "> <input type=" rad Io "class=" Radio-inline "name=" Position "value=" DC "val=" DC "/> Defender <input type=" Radio "class=" Radi O-inline "Name=" Position "value=" MC "val=" MC "/> Midfield <input type=" Radio "class=" Radio-inline "name= "Position" value= "FW" val= "FW"/> Winger <input type= "Radio" class= "Radio-inline" name= "Position" Valu E= "St" val= "St"/> Shooter </div> </div> <div class= "Text-center" > <button type= "button" class= "btn btn-info col-sm-offset-2" id= "btntest" > OK </button> < ;/div> </form> </div></body>View CodeJSON data included
{"id": +, "name": "Crespo", "Birthday": "2014-08-19t16:06:01.0522081+08:00", "number": 9, "Cotch": {"id": 1, "name": "Me "}," Friends ": [{" id ": 1," name ": 0},{" id ": 3," name ": 0}]," Teammate ":" 3,4 "," Position ":" St "}
The last photo of success
Summary: There is no difficulty, it is estimated that everyone can do with snacks. For the type of judgment, after writing to feel that should be based on the type of control will be better, quickly off work, go home and change it. There is the code comment in $ ("[name=" + name + "][value=" + value + "]"). attr ("Checked", "checked"); This sentence can not find a specific value, do not know what is the reason, but also hope the great God advice.