如果將json格式資料繫結與表單元素上
有時候我們需要將後臺處理傳到頁面的json格式資料繫結到表單元素上,下面就是一段這樣的類似的程式碼例項,希望能夠對大家有所幫助,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> input { width:80px; height:18px; margin:0 10px 0 0; border:1px #999 solid; text-align:center } input:hover{border:1px #ff0000 solid} </style> <script type="text/javascript"> var obj = { webName:'螞蟻部落', address:'青島市南區', age:3 }; function bindJson(jsonObj){ for(var o in jsonObj){ var domObj = document.getElementById(o.toString()); if (domObj!=undefined){ domObj.value=jsonObj[o].toString(); } if (typeof(jsonObj[o])=="object") { bindJson(jsonObj[o]); } } } function bindData(){ bindJson(obj); } window.onload=function(){ var bt=document.getElementById("bt"); bt.onclick=function(){bindData()} } </script> </head> <body> <div> 網站名稱:<input id="webName" /> 網站地址:<input id="address" /> 網站年齡:<input id="age" /> <input type="button" value="點選繫結" id="bt"/> </div> </body> </html>
以上程式碼實現了我們的要求,點選按鈕可以將相應資料寫入文字框,程式碼比較簡單這裡就不多介紹了。
相關文章
- 給定json資料,將資料與頁面結構進行繫結JSON
- 將表單元素轉換為json格式物件例項程式碼JSON物件
- angular 多選表單資料繫結Angular
- JSON編碼格式提交表單資料詳解JSON
- 簡單資料繫結和複雜資料繫結
- jq 將form表單中的資料轉為jsonORMJSON
- Java與Json資料格式轉換JavaJSON
- 將任意格式轉換為JSON資料格式的工具類JSON
- Laravel 8 表單驗證丟擲異常返回 json 格式資料LaravelJSON
- JSON 資料格式JSON
- 將Json值填充至表單JSON
- 第 10 章 表單元素[上]
- 關於重寫 Laravel 表單驗證器 Request 返回 JSON 的資料格式LaravelJSON
- jQuery解析json格式資料生成級聯選單jQueryJSON
- Android中JSON資料格式的簡單使用AndroidJSON
- 〈%# 〉與〈%= 〉的區別,顯示資料與繫結資料
- MySQL將提供與Linux繫結的資料庫下載(轉)MySqlLinux資料庫
- 【阿不】深入ASP.NET資料繫結(上)ASP.NET
- 將物件解析為JSON資料和將JSON資料解析為物件的簡單例項物件JSON單例
- js解析php格式的表單到json物件PHPJSON物件
- JSON資料格式的使用JSON
- php操作JSON格式資料PHPJSON
- 小王的學習筆記(十四)——vue資料渲染、事件處理、表單輸入與繫結筆記Vue事件
- 資料繫結
- 從單向到雙向資料繫結
- 前端三大框架:資料繫結與資料流前端框架
- 探索多種資料格式:JSON、YAML、XML、CSV等資料格式詳解與比較JSONYAMLXML
- JSON Schema與表單驗證JSON
- Vue.js表單輸入繫結Vue.js
- jQuery通過ajax返回json格式資料簡單介紹jQueryJSON
- 資料型別和Json格式資料型別JSON
- Delphi處理JSON格式資料JSON
- 小程式與Vue對比·資料繫結Vue
- 資料繫結原理
- JavaScript學習總結(六)資料型別和JSON格式JavaScript資料型別JSON
- 資料結構與演算法-線性表-單連結串列資料結構演算法
- 關於表單回顯和資料繫結,你有什麼最佳實踐?
- FlatList 資料繫結 及上拉載入實現