如何閱讀使用JQUERY的JSON對象值並將其添加到HTML中

Question

我的ASPX頁面的JSON響應低於我的客戶端頁面。現在我想讀取它的值，並要生成的HTML

jsonData ={ "tnf": { "ci": [ {"atit": "Australia Pass", "img": "\/fr\/english\/Images\/EN_Fly_to_Rio_de_Janeiro_v1_185_tcm233-658117.jpg", "sop": "\/fr\/english\/destinations_offers\/special_offers\/mysite_visit_australia_pass\/mysite_visit_australia_pass.aspx" } ], "elt": [ {"t": "sfp", "value": "More special fares" } ], "f": [ { "a": [ {"c": "Hamburg", "p": "from GBP 469*", "pm": "id=744431#744431", "t": "sfp" }, {"c": "Dubai", "p": "from GBP 559*", "pm": "id=744432#744432", "t": "sfp" }, {"c": "Thiruvananthapuram", "p": "from GBP 559*", "pm": "id=744433#744433", "t": "sfp" }, {"c": "Johannesburg", "p": "from GBP 559*", "pm": "id=744434#744434", "t": "sfp" }, {"c": "Beijing", "p": "from GBP 1,780*", "pm": "id=744435#744435", "t": "sfp" }, {"c": "Guangzhou", "p": "from GBP 469", "pm": "pub=\/fr\/english&pageurl=\/IBE.aspx&section=IBE&TID=SB&resultby=2&j=f&showpage=true&seldcity1=LHR&selacity1=JNB&selddate1=08%20Dec%2011&seladate1=09%20Dec%2011&bsp=Special+Fares+Widget&selcabinclass=0&showsearch=true", "t": "ffp" }, {"c": "Manila", "p": "from GBP 559*", "pm": "id=744437#744437", "t": "sfp" }, {"c": "Kuala Lumpur", "p": "from GBP 559*", "pm": "id=744438#744438", "t": "sfp" } ], "d": [ {"t": "sfp", "value": "From London Heathrow (LHR)" } ] } ], "nof": [ { "a": [ {"class": "bodyLink", "href": "\/sn\/english\/destinations_offers\/special_offers\/special_offers.aspx", "title": "Special Offers", "value": "Special Offers" } ], "value": [ "We don’t have any Special Fares at the moment. Please check again another time, or see our current", "." ] } ], "tc": "Conditions apply for each fare. Dublin commence from 9th January 2012.", "u": [ {"ffp": "\/SessionHandler.aspx", "ffpm": "pageurl=\/IBE.aspx&pub=\/fr\/english&section=IBE&j=f&bsp=Special+Fares+Widget", "ot": "\/fr\/english\/destinations_offers\/special_offers\/mysite_visit_australia_pass\/mysite_visit_australia_pass.aspx", "sfp": "\/fr\/english\/destinations_offers\/special_offers\/special_fares\/special_fares.aspx" } ] }} 

請建議我怎麼能讀它表明，我可以很容易地將它添加到我的HTMLS

編輯：

這jQuery代碼裏面我是用得到這些值：

$(document).ready(function() { 
     $('#btnSearch').click(function() { 

      var strInput = ""; 
      var strSearchType = $('#ddnSearchType').val(); 
      strInput = strInput + "?q=" + strSearchType; 
      var serviceReq = "http://localhost:2853/jsonproxy/jsonprxy.aspx"; 

      $.ajax({ 
       url: serviceReq + strInput, 
       dataType: "jsonp", 
       jsonpCallback: "processJsonData", 
       success: function(data, textStatus, jqXHR) { 
        // don't do anything here, since the processing happened in callback function 
       }, 
       error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); } 
      }); 
     }); 
     function processJsonData(data) { 
      alert(data); 
      $.each(data, function(i, tnf) { 
       alert(tnf.nof[0].a[0].href) 
       alert(tnf.elt[0].value) 
       alert(tnf.f[0].a.c); 
       $.each(tnf.f[0].a, function(j, adata) { 
        alert(adata.c); 
        alert(adata.pm) 
       }); 

      }); 
     } 
    }); 

我可以看到的是HttpFox工具三個弄變量，

q even 
callback processJsonData 
_ 1326530518049 

它給出的解析器錯誤以及「processJsonData」函數無法識別。

從我的CS返回的結果如上。

下面是我使用來獲取JSON

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
using System.Web; 
using System.Web.Security; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
using System.Web.UI.WebControls.WebParts; 
using System.Web.UI.HtmlControls; 
using System.Xml; 
using System.IO; 
using System.Runtime.Serialization.Json; 

public partial class jsonProxy : System.Web.UI.Page 
{ 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     string strResult = ""; 
     string strSearch = ""; 
     try 
     { 
      if (Request.QueryString.Count != 0 && Request.QueryString["q"] != string.Empty) 
      { 
       strSearch = Request.QueryString["q"]; 
      } 
      strResult = performSearch(strSearch); 
     } 
     catch 
     { 
      strResult = performSearch(""); 
     } 
     Response.Clear(); //optional: if we've sent anything before 
     Response.ContentType = "text/html"; //must be 'text/xml' 
     Response.ContentEncoding = System.Text.Encoding.UTF8; //we'd like UTF-8 

     Response.Write("jsonData =" + strResult + ""); 
     Response.End(); //optional: will end processing 

    } 
    private string performSearch(string strSearch) 
    { 
     string returnStr = ""; 
     XmlDocument docXml = new XmlDocument(); 
     docXml.Load("xml/SpecialFares.xml"); 
     returnStr = XmlToJson.XmlToJSON(docXml); 
     return (returnStr); 
    } 
} 

感謝

最好的問候，代碼 MS

Answer 1

你有什麼沒有JSON，但JavaScript的。要使用此功能，您需要添加：

<script src="myscript.js" ></script> 

到您的html。然後jsonData將是一個全局對象，所以你可以簡單地指：

alert(jsonData.tnf.ci[0].atit) 

這將提醒Australia Pass。

更可能的是，您要做的是刪除返回字符串的jsonData=部分。

$.ajax({ 
    url: "your_js_url.aspx", 
    dataType: "json", 
    success: function(data, textStatus, jqXHR) { 
    // process the js object data that will contain your returned data 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); } 
}); 

更多細節可以在jQuery的ajax的文檔中找到：http://api.jquery.com/jQuery.ajax/

瞭解JSON和JSONP之間的區別，Wikipedia JSONP to the rescue：

然後你可以用一個典型的jQuery Ajax請求處理數據

JSONP請求不是檢索JSON，而是任意JavaScript代碼。 它們由JavaScript解釋器進行評估，而不是由JSON 解析器進行分析。

此StackOverflow問題也解決它：What is JSONP all about?。

所以對於JSON，我們以JSON格式返回原始數據，而使用JSONP返回一個腳本，該腳本將由瀏覽器的JavaScript解釋器進行評估。通常做的是在腳本中進行函數調用。在你的情況，你可能也有apsx頁面返回：

processJsonData({ { /*your json data here*/ } }); 

的事情是，JSON數據是有效的JavaScript符號，這就是爲什麼JSON和Javascript一起玩這麼好聽。現在

，在你的代碼，你需要實現processJsonData功能：

function processJsonData(data) { ... } 

請注意，此與jQuery的工作，你需要改變你的Ajax調用：

$.ajax({ 
    url: "your_js_url.aspx", 
    dataType: "jsonp", 
    jsonpCallback: "processJsonData", 
    success: function(data, textStatus, jqXHR) { 
    // don't do anything here, since the processing happened in callback function 
    }, 
    error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); } 
}); 

現在，作爲以及如何處理您的processJsonData函數中的數據，以及您將數據作爲JavaScript對象接收，以及如何將其映射到HTML取決於數據以及您希望如何顯示數據。恐怕你的json對我來說有點太複雜，無法猜測你想要用它做什麼。

要調用該函數processJsonData與您的數據，改變你的.cs行：

Response.Write("jsonData =" + strResult + ""); 

到：

Response.Write("processJsonData(" + strResult + ");"); 

Answer 2

推薦你看看jQuery的.getJson或阿賈克斯。

但作爲一個樣本：

$.ajax({ 
    url: 'url/to/get/json', 
    type: "Post", 
    success: function (result) { 
     //result will contain your json object 
     //loop through json and output as HTML 
}); 

Answer 3

請確保您已經添加了在JS定義爲您的JSONP腳本標籤的回調函數。

例如：

jQuery.getJSON("http://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=?", 
function(data) {//here is the parser 
    alert("Symbol: " + data.symbol + ", Price: " + data.price); 
}); 

然後在你的服務器端腳本，你需要做如下（Java Servlet的）

@Override 
protected void doGet(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException { 
    String jsonData = getDataAsJson(req.getParameter("symbol")); 
    String output = req.getParameter("callback") + "(" + jsonData + ");"; 

    resp.setContentType("text/javascript"); 

    PrintWriter out = resp.getWriter(); 
    out.println(output); 
} 

其實在服務器端腳本的主要目的是返回一個字符串像「回調（OBJ）」比需要在JS中執行。

JSONP用於通過XHR cross-origin需要包含serverside腳本。確保您已將回調添加到您的JSONP腳本中。這裏是IBM develperworks中的Resources。

順便說一句：您可以在回調函數中試試JSON2和JSON2-source以確保返回的是JSON。

然後自己編寫解析器/替換器函數。