jquery从文件中加载特定内容

Question

我正在尝试从由标签或其他内容组织的纯文本中获取特定文本；然后加载现有的 div 或动态创建一个 div 以加载它。

不知道用json是否可以

我尝试过像这样创建一个 .json 文件 data_prod.js：

{"articles":
        [
            {
                "title1":"bla bla bla"
            },
            {
                "title2":"bla bla bla"
            },
            ...
        ]
}

在我的 html 代码中，我编写了该函数：

    $.getJSON("data_prod.js",function(data)
        {
            var div_data = data.title1;
            $(div_data).appendTo("#tt_mn");
        });

在这种情况下我想加载的内容只是一个名为 #tt_mn 的 div 中的 title1

有问题

现在我已经修改了。

data.json

{
   "articles": [{ "title": "fresa" }, { "title": "limon" }, { "title": "naranja" } ]
}

test_json.html

<div id="op">push me</div>  
<div id="tt_mn" data-articleidx="1"></div>
<script>
$('#op').live("click", function() {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data.json", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 
</script>

EXAMPLE

Answer 1

您应该首先更改一下您的 json，以便所有项目都具有相同的“标题”属性：

{
   "articles": [{ "title": "title 1" }, { "title": "title 2" }, ... ]
}

然后，在 .getJSON() 函数的回调中，遍历所有项目并生成带有标题值的 html 标记。

我认为应用标记最有效的方法是构建一个表示所需标记的字符串数组，然后一次将其全部附加。 for 循环也将比 jquery .each() 或 .map() 更有效。

$.getJSON("data_prod.js", function(data) {
    var titles = [];
    for (var i=0; i<data.articles.length;i++) {
        titles.push("<div>" + data.articles[i].title + "</div>");
    }
    $(titles.join('')).appendTo("#tt_mn");
});

EXAMPLE

---

编辑：

因此，如果您想通过单击按钮来显示一个特定的标题，您可以添加一个“data-”属性来指定您希望获得哪篇文章的标题：

<button data-articleidx="1">Get title</button>

然后：

$('button').click(function(e) {
    // get the index of the article for which the title should be obtained
    var idx = $(this).data('articleidx');
    $.getJSON("data_prod.js", function(data) {
        // be safe and the data parameter conformity prior to extracting the title
        if (data && data.articles && idx < data.articles.length) {
            $("<div>" + data.articles[idx].title + "</div>").appendTo("#tt_mn");
        }
    });
}); 

我仍然建议您将 json 更改为具有相同的标题属性名称。我想不出它们实际上是“title1”、“title2”的原因......

Answer 2

首先通过对所有文章使用相同的 title 属性而不是使用不同的属性名称（title1、title2、...）来修复您的 JSON：

{ 
    "articles": 
    [
        {
            "title":"bla bla bla"
        },
        {
            "title":"bla bla bla"
        },
        ...
    ] 
}

然后您可以循环浏览这些文章并使用title 属性：

$.getJSON("data_prod.js",function(data) {
    $.each(data.articles, function(index, article) {
        $('<div/>', {
            text: article.title
        }).appendTo("#tt_mn");
    });
});

---

更新：

如果您想保留 JSON 的原始结构并仅加载 title1，您可以执行以下操作：

$.getJSON("data_prod.js", function(data) {
    for (var i = 0; i < data.articles.length; i++) {
        var article = data.articles[i];
        for (var prop in article) {
            if (article.hasOwnProperty('title1')) {
                var title = article.title1;
                $('<div/>', {
                    text: title
                }).appendTo("#tt_mn");
                break;
           }
        }
    }
});

Answer 3

这里有一个建议：

1) 创建容器：

加载内容（文本/图像）

2) 为我们的脚本添加一个非常具体的属性：

加载内容（文本/图片）>

3) 添加脚本以加载动态内容：

 <script type="text/javascript">
$(function()){
     $('[data-url]').each(function(){

         // just making sure we have the correct instance.
         var $elem = $(this);
         // Get the url
         var url = $(this).attrr('data-url');


         $.get(url, function(html) {
             /// adding the content to the container.
             $elem.html(html); 
         });
     });

};

`