【问题标题】:Getting started styling JSON search results from DocumentCloud从 DocumentCloud 开始为 JSON 搜索结果设置样式
【发布时间】:2012-05-02 10:49:29
【问题描述】:

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

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

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

我不知道该怎么做:

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

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

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

【问题讨论】:

    标签: html css json


    【解决方案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 也不太熟悉。我可以理解为什么这对我来说是更可取的方法,至少在最初是这样。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-30
    • 2023-02-23
    • 1970-01-01
    • 1970-01-01
    • 2014-10-04
    • 1970-01-01
    相关资源
    最近更新 更多