入门为DocumentCloud中的JSON搜索结果设置样式 [英] Getting started styling JSON search results from DocumentCloud

问题描述

我想要建立一个系统，样式的DocumentCloud的搜索结果（并允许我链接到一个给定的文档）。

I'm looking to build a system that styles the search results from DocumentCloud (and allows me to link to a given document).

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

I know I can query DocumentCloud and return JSON results using a search string like this:

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

我不要知道如何：

1. 抓取搜索的输出并将其放在我自己的页面上

我想知道如何开始使用这个资料经验丰富的HTML和CSS，但我从来没有使用过JSON。

I'd just like to know how to get started with this, I'm experienced with HTML and CSS but I've never worked with JSON before.

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

There's more info here but I just don't know where to get started: https://www.documentcloud.org/help/api

推荐答案

听起来你不是那么熟悉JavaScript，正确吗？ JSON代表JavaScript Ojbect Notation，所以要使用它，你必须潜入一点。我强烈建议使用JavaScript框架/库，即jQuery来处理重型提升。 （还有其他有价值的库，但jQuery是目前最受欢迎的，并且非常友好，使用类似CSS的选择器来操作文档对象模型）。

It sounds like you're not so familiar with JavaScript, correct? JSON stands for JavaScript Ojbect Notation, so to work with it, you'll have to dive in a bit. I strongly recommend looking into using a JavaScript framework/library, namely jQuery to handle the heavy lifting. (There are other worthy libraries, but jQuery is by far the most popular, and is very friendly, using CSS-like selectors to manipulate the document object model).

这个jQuery教程： jQuery如何工作

check this jQuery tutorial: How jQuery Works

这里一个关于使用jQuery的jsonp获取远程rsults并在页面中使用它们的引文： http ：//www.ibm.com/developerworks/library/wa-aj-jsonp1/

Here's a primer on using jQuery's jsonp to fetch remote rsults and using them in a page: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

您最终可能会遇到javascript文件中的代码，或者一个脚本标签（跟在jQuery库的链接之后）：

You might end up with code in a javascript file, or a script tag (following a link to the jQuery library) that looks like this:

$(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规则将适用于它们。

As a result, extra text & markup can be added to elements you already have on your page in whatever form/position you need it, and regular CSS rules from any style block or CSS file linked on your page will apply to them.

祝你好运。

这篇关于入门为DocumentCloud中的JSON搜索结果设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！