从 DocumentCloud 开始为 JSON 搜索结果设置样式

Posted 2023-03-05

【中文标题】从 DocumentCloud 开始为 JSON 搜索结果设置样式

【英文标题】：Getting started styling JSON search results from DocumentCloud

【发布时间】：2012-05-02 10:49:29

【问题描述】：

我正在寻找构建一个系统来设置来自 DocumentCloud 的搜索结果的样式（并允许我链接到给定的文档）。

我知道我可以使用这样的搜索字符串查询 DocumentCloud 并返回 JSON 结果：

https://www.documentcloud.org/api/search.json?q=obama

我不知道该怎么做：

抓取搜索结果并将其放在我自己的页面上 在页面上设置数据后设置样式

我只是想知道如何开始使用它，我对 html 和 CSS 有经验，但我以前从未使用过 JSON。

这里有更多信息，但我不知道从哪里开始：https://www.documentcloud.org/help/api

【参考方案1】：

听起来您对 javascript 不太熟悉，对吗？ JSON 代表 JavaScript Ojbect Notation，因此要使用它，您必须深入研究一下。我强烈建议考虑使用 JavaScript 框架/库，即 jQuery 来处理繁重的工作。 （还有其他有价值的库，但 jQuery 是迄今为止最流行的，并且非常友好，使用类似 CSS 的选择器来操作文档对象模型）。

查看这个 jQuery 教程：How jQuery Works

这是使用 jQuery 的 jsonp 获取远程结果并在页面中使用它们的入门：http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

您最终可能会得到一个 javascript 文件中的代码，或者一个如下所示的脚本标记（在指向 jQuery 库的链接之后）：

$(document).ready(function () 

    $.getJSON('https://www.documentcloud.org/api/search.json?q=obama&callback=?', null, function (results) 
            // this would append whatever the json returns for 'total' 
            // inside an element on your page with an id of 'resultsCount':
            $('#restulsCount').append(data.total); 
          );   

);

因此，可以将额外的文本和标记添加到您页面上已有的元素中，以您需要的任何形式/位置，并且页面上链接的任何样式块或 CSS 文件中的常规 CSS 规则将适用于它们.

祝你好运。

【讨论】：

哇！很棒的入门书让我前进。你是对的，我对 JavaScript 也不太熟悉。我可以理解为什么这对我来说是更可取的方法，至少在最初是这样。谢谢！