Question

在对WebMethod进行Ajax调用后，我收到一个JSON响应，并希望解析它并以下列格式的div-tags显示数据（div-tags应该动态创建）。我在下面标记了粗体属性，应该用JSON响应的等效属性替换。每个新闻项（在JSON响应中由{}封装） - 对应于一个list-element。以下是如何呈现数据：

<div class="articleList-list"> 
                <ul>
                    <li>
                        <div class="articleList-image">
                            <img src="**ImageSource**" width="150px" height="100px" alt="the article's image" />
                        </div>
                        <div class="articleList-article">
                            <h3><a href="**UrlForNewsitem**">**OverskriftArticleData**</a></h3>
                            <p>**Ingress**</p>
                        </div>                
                    </li>
                    <li>
                        <div class="articleList-image">
                            <img src="#" width="150px" height="100px" alt="the article's image" />
                        </div>
                        <div class="articleList-article">
                            <h3><a href="#">Artikkel nummer 2s tittel</a></h3>
                            <p>Et kort sammendrag av hva artikkelen handler om, eller starten på selve artikkelen. 
                            Dette skal ligge til ventstre i hovedinnholdet, til høyre for artikkelens bilde og oversikten over alle artikkel-kategorier.</p>
                        </div>                
                    </li>
                </ul>
            </div>

以下是JSON响应：

[{"ImageSource":"/ImageVaultFiles/id_1/cf_2/Person.JPG","OverskriftArticleData":"ArtikelOverskrift","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2816&epslanguage=en","ByLineOfArticle":"ForfattareByline","Ingress":"Detta ær ingressen till artikeln"},{"ImageSource":"/ImageVaultFiles/id_10/cf_2/city.JPG","OverskriftArticleData":"Rubrik","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2814&epslanguage=en","ByLineOfArticle":"Anders B","Ingress":"Testar ingress"}]

如何以简洁有效的方式解析并呈现JQuery响应？

Answer 1

假设您的响应是有效的JSON，则无需解析它。您可以直接使用它，因为它是一个有效的JavaScript对象。您的响应似乎是一个包含单个对象的数组，因此您可以像这样使用它：

data = [{"ImageSource":"/ImageVaultFiles/id_1/cf_2/Person.JPG","OverskriftArticleData":"ArtikelOverskrift","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2816&epslanguage=en","ByLineOfArticle":"ForfattareByline","Ingress":"Detta ær ingressen till artikeln"},{"ImageSource":"/ImageVaultFiles/id_10/cf_2/city.JPG","OverskriftArticleData":"Rubrik","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2814&epslanguage=en","ByLineOfArticle":"Anders B","Ingress":"Testar ingress"}];
var imgSource = data[0].ImageSource;

等等。

Answer 2

您可以使用jQuery parseJSON函数。您可以在http://api.jquery.com/jQuery.parseJSON/

了解更多相关信息

var obj = jQuery.parseJSON(response_json);
//Now use the various properties of object which contain the values of json response.

$("articleList-article > img")[0].attribute("src", obj.ImageSource);

//And so on

您也可以使用：

data = [{"ImageSource":"/ImageVaultFiles/id_1/cf_2/Person.JPG","OverskriftArticleData":"ArtikelOverskrift","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2816&epslanguage=en","ByLineOfArticle":"ForfattareByline","Ingress":"Detta ær ingressen till artikeln"},{"ImageSource":"/ImageVaultFiles/id_10/cf_2/city.JPG","OverskriftArticleData":"Rubrik","UrlForNewsitem":"/Templates/Skien.inter/Pages/Aktuellt.aspx?id=2814&epslanguage=en","ByLineOfArticle":"Anders B","Ingress":"Testar ingress"}];
$("articleList-article > img")[0].attribute("src", data[0].ImageSource);

Answer 3

使用模板，google .tmpl（）或JsRender

Answer 4

假设您正在使用jQuery实际进行Ajax调用，您可以传递一个额外的post参数，让它自动为您解码并将其传递给您的回调函数：

$.post('/someUrl/', {some: 'object params'}, function myCallback(data) {
  /* here the data variable is an object */
  alert(data.something);
}, 'json');

这实际上是$.getJSON的POST版本。

Answer 5

收到JSON响应后，这称为：

function ParseAndPresentJquery(stringToParse, hrefNameOfTab) 
    {
        data = JSON.parse(stringToParse);

        var src = "<div class='articleList-list'><ul>";

        for (var j = 0; j < data.length; j++) {
            src += "<li><div class='articleList-article'><h3><a href='" + data[j].UrlForNewsitem + "'>";
            src += data[j].OverskriftArticleData + "</a></h3></div>";
            src += "<p>";
            src+= data[j].Ingress;
            src += "</p>";
            src += "</div></li>";
        }
        src += "</ul></div>";
        $(hrefNameOfTab).html("");
        $(hrefNameOfTab).append(src);
    }

如何解析和呈现JQuery响应

5 个答案: