JavaScript對象符號(JSON)簡介
作者：笨笨猿
一段時間以來，程序員/開發(fā)人員/架構(gòu)師面臨的最大挑戰(zhàn)是如何在不考慮硬件或軟件需求的情況下將數(shù)據(jù)從一個系統(tǒng)傳輸?shù)搅硪粋€系統(tǒng)。在此期間，我們看到許多技術(shù)都試圖使這一需求盡可能簡單，現(xiàn)在我們終于在JSON的幫助下實現(xiàn)了它。
介紹
一段時間以來，程序員/開發(fā)人員/架構(gòu)師面臨的比較大的挑戰(zhàn)是如何在不考慮硬件或軟件需求的情況下將數(shù)據(jù)從一個系統(tǒng)傳輸?shù)搅硪粋€系統(tǒng)。在此期間，我們看到許多技術(shù)都試圖使這一需求盡可能簡單，現(xiàn)在我們終于在JSON的幫助下實現(xiàn)了它。
JSON是JavaScript對象表示法的首字母縮寫。Douglas Crockford在本世紀初最初指定了JSON格式。JSON的特點如下：
- 與XML數(shù)據(jù)相比，JSON數(shù)據(jù)更容易被人類讀取，XML數(shù)據(jù)也用于從一個系統(tǒng)傳輸?shù)搅硪粋€系統(tǒng)。
- 它是一種輕量級數(shù)據(jù)交換格式。
- 它遵循開放標準格式來傳輸以“鍵-值對”模式存儲信息的數(shù)據(jù)對象。
- 它是一種與語言無關(guān)的數(shù)據(jù)格式。
- JSON可以更容易地映射到面向?qū)ο蟮南到y(tǒng)。
- 包含JSON數(shù)據(jù)的文件有一個"?？梢员蝗魏尉幊陶Z言讀取的擴展。
典型的JSON是這樣的：
示例1
- {
- “Name”:”Jojo”,
- “Age”: 23
- }
解釋
“Name”是鍵，“Jojo”是鍵的值。同樣，“年齡”是鍵，23是鍵的值。如果您注意到值23沒有雙引號，這又證明了一點，JSON支持多種數(shù)據(jù)類型，其中一種是數(shù)字。除了數(shù)字和字符串，JSON支持的其他數(shù)據(jù)類型有：
- 布爾
- 數(shù)組
- 數(shù)字(整型、浮點數(shù)、定點數(shù))
- 對象
- 空格
- Null
上面的示例只包含一個對象的詳細信息。如果我們計劃有一個對象數(shù)組，那么存儲將是這樣的：
示例2
- {
- “Employees”:[
- {“Name”:”PopatLal”, “Age”:25},
- {“Name”:”Santa Singh”, “Age”:27},
- {“Name”:”Banta Singh”, “Age”:28},
- {“Name”:”SohanLal”, “Age”:25},
- ]
- }
在示例2中，我們有一個名為“Employees”的對象數(shù)組，其中包含兩個組件“Name”和“Age”。
現(xiàn)在，我們注意到的更大的問題是如何使用ASP.NET MVC 4在web頁面上顯示JSON信息。讓我們一步一步來看看如何使用相同的方法。
- 我們?yōu)檫@個示例應(yīng)用程序選擇了一個基本模板，解決方案資源管理器看起來像這樣：
- 現(xiàn)在我們正在創(chuàng)建一個非常簡單的應(yīng)用程序，其目的是打印一條表示“歡迎JSON”的歡迎消息。為此，我們將添加一個MVC控制器和一個返回JSONResult的方法。代碼如下：
- public JsonResultWelcomeMessage()
- {
- String message = "Welcome to JSON";
- returnJson(message, JsonRequestBehavior.AllowGet);
- }
- 當你運行這個程序時，你會得到如下的輸出：
- 這段代碼現(xiàn)在證明我們能夠查看JSON數(shù)據(jù)，現(xiàn)在我們需要在HTML頁面上使用它，因此我們需要為它創(chuàng)建一個視圖。
- 在“DemoController”下，我們寫了一個名為“Index”的ActionResult方法，這個方法返回一個同名的視圖，即“Index.cshtml”。
- publicActionResult Index()
- {
- return View();
- }
在Index.cshtml中的HTML代碼，看起來像這樣的：
- @{
- Layout = null;
- }
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width" />
- <title>Index</title>
- </head>
- <body>
- <div>
- <input type="button" id="btn1" value="Print" />
- </div>
- <br />
- <br />
- <div id="messagediv" style="align-items: center; text-align: center; border: 3px solid blue; width: 300px; height: 300px; background-color: lightblue; color: yellow"></div>
- </body>
- </html>
- 上述代碼的輸出如下所示：
- 現(xiàn)在，為了執(zhí)行JSON方法并在給定框內(nèi)打印消息，我們必須使用JQuery，在其中調(diào)用“getJSON”方法，在其中調(diào)用“WelcomeMessage”方法。
- 代碼如下所示：
- <scriptsrc="~/Scripts/jquery-2.2.3.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function()
- {
- $("#btn1").click(function()
- {
- vardivObj = $("#messagediv");
- $.getJSON("/Demo/WelcomeMessage/", null, function(data)
- {
- divObj.append("<b>" +
- data + "</b>");
- });
- });
- });
- </script>
- 單擊按鈕后，輸出如下所示：
總結(jié)
上面的例子只是為了演示如何在MVC中使用JSON。我希望這篇文章對您有所幫助，記得給我點個贊和關(guān)注哦!
責任編輯：華軒
來源：
今日頭條
