Как прочитать значения объекта JSON при использовании JQUERY и добавить их в HTML

Question

Я получил ответ ниже JSON со своей страницы ASPX на мою страницу клиента. Теперь я хочу прочитать значения из него и хочу сгенерировать 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" } ] }}

Пожалуйста, предложите, как я могу прочитать это, чтобы показать, что я могу легко добавить его в мои HTML

EDIT:

Это код 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)
                });

            });
        }
    });

Я вижу три переменные GET в инструменте 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= возвращаемой строки. Затем вы можете обработать данные с помощью типичного jQuery-запроса ajax:

$.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, Википедия JSONP на помощь :

Запросы для JSONP получают не JSON, а произвольный код JavaScript. Они оцениваются интерпретатором JavaScript, а не анализируются JSON. синтаксический анализатор.

Этот вопрос StackOverflow также обращается к нему: Что такое JSONP? .

Так, с 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

Пожалуйста, убедитесь, что вы добавили функцию обратного вызова, которая определена в 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);
}

На самом деле основная цель сценария на стороне сервера - вернуть строку типа «callback (obj)», которую необходимо выполнить в JS.

JSONP используется для передачи XHR кросс-источника , который должен включать серверный скрипт. Убедитесь, что вы уже добавили обратный вызов в свой скрипт JSONP. Вот Ресурсы в IBM develperworks.

Кстати: вы можете попробовать JSON2 и JSON2-source в вашей функции обратного вызова, чтобы убедиться, что возвращается JSON.

А затем напишите функцию синтаксического анализа / замены самостоятельно.

Answer 3

Рекомендую заглянуть в jQuery .getJson или .ajax.

Но как образец:

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