Jquery JSON和标签

我是JQuery的新手，需要一些帮助来理解如何构建我的代码......我有一个工作的JSON页面，并且能够让我的代码显示预期的结果。现在我想把这些结果以标签格式。基本上我的文章的标题是在标签和下面的文章的主体。我的代码现在显示了标签区域中的所有标题，这是正确的，现在我需要在主要部分中获取主体。最终的结构应该是这样的：Jquery JSON和标签

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">AAA</a></li> 
     <li><a href="#tabs-2">BBB</a></li> 
     <li><a href="#tabs-3">CCC</a></li> 
    </ul> 
    <div id="tabs-1"><h2>AAA</h2><p>This article is about AAA</p></div> 
    <div id="tabs-2"><h2>BBB</h2><p>This article is about BBB</p></div> 
    <div id="tabs-3"><h2>CCC</h2><p>This article is about CCC</p></div> 
</div>

所以，我可以得到第一标签区域显示正确，但我不知道如何检索第二组数据（的div的文章）的 - 我曾尝试复制函数searchcallback代码并重命名它，我试图重复整个查询，都没有工作。我知道我由于缺乏经验而错过了一些东西。有人能告诉我构建代码的正确方法吗？我真的很想学习这些，我已经做了很多的阅读，但还没有完全理解呢......我的脚本在下面，JSON数组结构就在下面。谢谢。

<script> 
var jsonURL = "//www.myurl.com/api.php?columns = id_cr, title, teaser & order = title & page = 1 "; 
jQuery(document).ready(function() { 
    jQuery.ajax({ 
     url: jsonURL, 
     success: searchCallback 
    }); 
}); 

function searchCallback(data) { 
    var content_data = data.content_data.records; 
    jQuery.each(content_data, function(index, content_dat) { 
     jQuery(".tabs").append('<li><a href="#tabs-' + content_dat[0] + '">' + content_dat[2] + '</a></li>'); 
    }); 
}; 
</script> 


<div id="tabs"> 
    <ul> 
    <div class="tabs"></div> 
    </ul> 
    <div class="body"></div> 
</div> 

content_data  
columns  
    0 "id_cr" 
    1 "teaser" 
    2 "title" 
records  
    0 
    0 "1" 
    1 "This article is about AAA" 
    2 "AAA" 
    1 
    0 "2" 
    1 "This article is about BBB" 
    2 "BBB" 
    3 
    0 "3" 
    1 "This article is about CCC" 
    2 "CCC" 
results 3

来源

2017-09-16 user1255154

你描述结尾处的内容是不是在JavaScript格式。你可以重新格式化它，使其明确吗？ – trincot

请提供JSON响应，最后您的代码不好。 – skobaljic

是的，最后的JSON代码只是它如何布置的一个样本 - 它不是我不想发布的实际数据。我的JSON验证，我没有检索数据的麻烦。我的问题是关于如何构造Jquery中的选项卡......如何为选项卡式部分检索一组数据，然后为身体部分设置另一个版本......谢谢:) – user1255154

试试这段代码。它没有经过测试，因为我没有你的API网址。

我从UL 标签删除类（class和id同名是坏的风格，你不需要它）
为JQUERY UI TABS你需要一个刀片在UL的标签本身，而另一个标签的内容在ul之后。 <li><a href="#tabs-1">tabname</a><li> <div id="tabs-1">content</div>

你content_dat [0]是不需要的，因为指数已经有

<script> 
    var jsonURL = "http://www.myurl.com/api.php/content_data?columns=id_cr,title,teaser&order=title&page=1"; 
     jQuery(document).ready(function() { 
      jQuery.ajax({ 
       url: jsonURL, 
       success: searchCallback 
      }); 
     }); 
     function searchCallback(data) { 
      var content_data = data.content_data.records; 
      jQuery.each(content_data, function(index, content_dat) { 
       jQuery("#tabs ul").append('<li><a href="#tabs-'+index+'">' + content_dat[2] + '</a></li>'); 
       jQuery("#tabs ul").after("<div id='tabs-"+index+"'>"+content_dat[1]+"</div>"); 
      }); 
     }; 
    </script> 

    <div id="tabs"> 
     <ul> 
     </ul> 
    </div>

来源

2017-09-16 21:44:15

谢谢你，代码工作和你的解释是非常有帮助的。我很感激：） – user1255154

Jquery JSON和标签

回答

相关问题