0

我在对 WebMethod 的 Ajax 调用之后收到 JSON 响应，并且想要解析它并以以下格式的 div-tags 呈现数据（应该动态创建 div-tags）。我将下面的属性标记为粗体，应将其替换为 JSON 响应的等效属性。每个新闻项（在 JSON 响应中由 { } 封装）对应一个列表元素。以下是数据的呈现方式：

<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 响应？

4

5 回答 5

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;

等等。

于 2012-10-16T12:11:27.273 回答
0

You can use the jQuery parseJSON function. You can read more about it here 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

Also you can simply use: 

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);
于 2012-10-16T12:09:25.517 回答
0

使用模板，谷歌 .tmpl() 或 JsRender

于 2012-10-16T12:11:59.613 回答
0

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

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

这实际上是$.getJSON.

于 2012-10-16T12:13:24.917 回答
0

在收到 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);
    }
于 2012-10-16T13:35:15.753 回答