Home > Developer > JavaScript
This article is mainly on the Javascript:json data page binding sample code is introduced, the need for friends can come to the reference, I hope to help you.
In web development, if you need to bind the JSON object returned by the server to the DOM element on an existing page, the traditional assignment was too cumbersome and tiring to write (especially when the JSON object was large), so I came up with the following lazy method, but there are two prerequisites: 1, The ID of the element is to be named consistent with the attribute in the JSON object 2, the name of the property in the JSON object, and it is best not to repeat the code as follows: <!doctype html> <html> <head> < Title>json Object Traversal demo </title> <script type= "Text/javascript" > var obj = {A: ' A1 ', B: ' B1 ', C:{c1: ' C1 '},d:1,e: True,f:new Date ("2012/12/24")}; //showjsonproperty (obj); /* Function Showjsonproperty (jsonobj) { for (var o in jsonobj) { alert ("Property name:" + o.tostring () + ", Value:" + JS Onobj[o].tostring () + ", type:" + typeof (Jsonobj[o)); if (typeof (Jsonobj[o)) = = "Object") { &nbs P;showjsonproperty (Jsonobj[o]); } &NBSP}} */ function Bindjson (jsonobj) { for (var o in jsonobj) { var domobj = doc Ument.getelementbyid (O.tostring ()); if (domobj!=undefined) { domobj.value=jsonobj[o].tostring (); } If typeof ( Jsonobj[o] = = "Object") { &NBSP;BINDJSON (Jsonobj[o]); } &NBSP}} function Binddata () { bindjson (obj);} </script> <style type= "Text/css" > input{width:80px;height:18px;margin:0 10px 0 0;border:1px #999 Solid} input:hover{border:1px #ff0000 solid} input[type=button]{background-color: #efefef; height:22px;} </style> </head> <body> <div> A: <input id= "a"/> B: <i Nput id= "B"/> C.C1: <input id= "C1"/> D: <input id= "D"/> e: ; input id= "E"/> F: <input id= "F"/> <input type= "button" value= "binding" id= "Btnbind" onclick = "Binddata ()"/> </div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
