JavaScript對(duì)象符號(hào)(JSON)簡介
介紹
一段時(shí)間以來，程序員/開發(fā)人員/架構(gòu)師面臨的比較大的挑戰(zhàn)是如何在不考慮硬件或軟件需求的情況下將數(shù)據(jù)從一個(gè)系統(tǒng)傳輸?shù)搅硪粋€(gè)系統(tǒng)。在此期間，我們看到許多技術(shù)都試圖使這一需求盡可能簡單，現(xiàn)在我們終于在JSON的幫助下實(shí)現(xiàn)了它。
JSON是JavaScript對(duì)象表示法的首字母縮寫。Douglas Crockford在本世紀(jì)初最初指定了JSON格式。JSON的特點(diǎn)如下：
- 與XML數(shù)據(jù)相比，JSON數(shù)據(jù)更容易被人類讀取，XML數(shù)據(jù)也用于從一個(gè)系統(tǒng)傳輸?shù)搅硪粋€(gè)系統(tǒng)。
- 它是一種輕量級(jí)數(shù)據(jù)交換格式。
- 它遵循開放標(biāo)準(zhǔn)格式來傳輸以“鍵-值對(duì)”模式存儲(chǔ)信息的數(shù)據(jù)對(duì)象。
- 它是一種與語言無關(guān)的數(shù)據(jù)格式。
- JSON可以更容易地映射到面向?qū)ο蟮南到y(tǒng)。
- 包含JSON數(shù)據(jù)的文件有一個(gè)"?？梢员蝗魏尉幊陶Z言讀取的擴(kuò)展。
典型的JSON是這樣的：
示例1
- {
- “Name”:”Jojo”,
- “Age”: 23
- }
解釋
“Name”是鍵，“Jojo”是鍵的值。同樣，“年齡”是鍵，23是鍵的值。如果您注意到值23沒有雙引號(hào)，這又證明了一點(diǎn)，JSON支持多種數(shù)據(jù)類型，其中一種是數(shù)字。除了數(shù)字和字符串，JSON支持的其他數(shù)據(jù)類型有：
- 布爾
- 數(shù)組
- 數(shù)字(整型、浮點(diǎn)數(shù)、定點(diǎn)數(shù))
- 對(duì)象
- 空格
- Null
上面的示例只包含一個(gè)對(duì)象的詳細(xì)信息。如果我們計(jì)劃有一個(gè)對(duì)象數(shù)組，那么存儲(chǔ)將是這樣的：
示例2
- {
- “Employees”:[
- {“Name”:”PopatLal”, “Age”:25},
- {“Name”:”Santa Singh”, “Age”:27},
- {“Name”:”Banta Singh”, “Age”:28},
- {“Name”:”SohanLal”, “Age”:25},
- ]
- }
在示例2中，我們有一個(gè)名為“Employees”的對(duì)象數(shù)組，其中包含兩個(gè)組件“Name”和“Age”。
現(xiàn)在，我們注意到的更大的問題是如何使用ASP.NET MVC 4在web頁面上顯示JSON信息。讓我們一步一步來看看如何使用相同的方法。
- 我們?yōu)檫@個(gè)示例應(yīng)用程序選擇了一個(gè)基本模板，解決方案資源管理器看起來像這樣：
- 現(xiàn)在我們正在創(chuàng)建一個(gè)非常簡單的應(yīng)用程序，其目的是打印一條表示“歡迎JSON”的歡迎消息。為此，我們將添加一個(gè)MVC控制器和一個(gè)返回JSONResult的方法。代碼如下：
- public JsonResultWelcomeMessage()
- {
- String message = "Welcome to JSON";
- returnJson(message, JsonRequestBehavior.AllowGet);
- }
- 當(dāng)你運(yùn)行這個(gè)程序時(shí)，你會(huì)得到如下的輸出：
- 這段代碼現(xiàn)在證明我們能夠查看JSON數(shù)據(jù)，現(xiàn)在我們需要在HTML頁面上使用它，因此我們需要為它創(chuàng)建一個(gè)視圖。
- 在“DemoController”下，我們寫了一個(gè)名為“Index”的ActionResult方法，這個(gè)方法返回一個(gè)同名的視圖，即“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。我希望這篇文章對(duì)您有所幫助，記得給我點(diǎn)個(gè)贊和關(guān)注哦!
