Question

我想通过Google ajax api获取Google搜索结果，然后将结果附加到DIV中。

Google正在使用json显示结果，但遗憾的是我不知道如何使用它。

我搜索了很多但没有结果。

这是我的代码，但不起作用:(也许你明白我想做什么）本地json链接工作但外部链接无效！

<script type="text/javascript">
  jQuery(function($){
    $.getJSON('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=stack', function(data) {
    $.each(data.responseData.results, function(i, article){
    $('#searchcontrol').append('<h2>' + article['title'] + '</h2><p>' + article['content'] + '</p>');
  });
});

}）;

谷歌json是这样的:(我想读这个）

{
    "responseData": {
        "results": [{
            "GsearchResultClass": "GwebSearch",
            "unescapedUrl": "http://en.wikipedia.org/wiki/Stack_(abstract_data_type)",
            "url": "http://en.wikipedia.org/wiki/Stack_(abstract_data_type)",
            "visibleUrl": "en.wikipedia.org",
            "cacheUrl": "http://www.google.com/search?q\u003dcache:hhCsdZCgMlUJ:en.wikipedia.org",
            "title": "\u003cb\u003eStack\u003c/b\u003e (abstract data type) - Wikipedia, the free encyclopedia",
            "titleNoFormatting": "Stack (abstract data type) - Wikipedia, the free encyclopedia",
            "content": "In computer science, a \u003cb\u003estack\u003c/b\u003e is a particular kind of abstract data type or collection \nin which the principal (or only) operations on the collection are the addition of \u003cb\u003e...\u003c/b\u003e"
        }, {
            "GsearchResultClass": "GwebSearch",
            "unescapedUrl": "http://stackoverflow.com/",
            "url": "http://stackoverflow.com/",
            "visibleUrl": "stackoverflow.com",
            "cacheUrl": "http://www.google.com/search?q\u003dcache:U1GC2GYOToIJ:stackoverflow.com",
            "title": "\u003cb\u003eStack\u003c/b\u003e Overflow",
            "titleNoFormatting": "Stack Overflow",
            "content": "A language-independent collaboratively edited question and answer site for \nprogrammers."
        }, {
            "GsearchResultClass": "GwebSearch",
            "unescapedUrl": "http://www.stack.com/",
            "url": "http://www.stack.com/",
            "visibleUrl": "www.stack.com",
            "cacheUrl": "http://www.google.com/search?q\u003dcache:E20ImyHZCpIJ:www.stack.com",
            "title": "Get Bigger, Stronger, Better, Faster | \u003cb\u003eSTACK\u003c/b\u003e",
            "titleNoFormatting": "Get Bigger, Stronger, Better, Faster | STACK",
            "content": "Get better at the sports you play and the life you lead at \u003cb\u003eSTACK\u003c/b\u003e. Improve your \ntraining, nutrition and lifestyle with daily."
        }, {
            "GsearchResultClass": "GwebSearch",
            "unescapedUrl": "http://docs.oracle.com/javase/7/docs/api/java/util/Stack.html",
            "url": "http://docs.oracle.com/javase/7/docs/api/java/util/Stack.html",
            "visibleUrl": "docs.oracle.com",
            "cacheUrl": "http://www.google.com/search?q\u003dcache:5G3WpASlFXAJ:docs.oracle.com",
            "title": "\u003cb\u003eStack\u003c/b\u003e (Java Platform SE 7 ) - Oracle Documentation",
            "titleNoFormatting": "Stack (Java Platform SE 7 ) - Oracle Documentation",
            "content": "The \u003cb\u003eStack\u003c/b\u003e class represents a last-in-first-out (LIFO) \u003cb\u003estack\u003c/b\u003e of objects. It extends \nclass Vector with five operations that allow a vector to be treated as a \u003cb\u003estack\u003c/b\u003e."
        }],
        "cursor": {
            "resultCount": "18,800,000",
            "pages": [{
                "start": "0",
                "label": 1
            }, {
                "start": "4",
                "label": 2
            }, {
                "start": "8",
                "label": 3
            }, {
                "start": "12",
                "label": 4
            }, {
                "start": "16",
                "label": 5
            }, {
                "start": "20",
                "label": 6
            }, {
                "start": "24",
                "label": 7
            }, {
                "start": "28",
                "label": 8
            }],
            "estimatedResultCount": "18800000",
            "currentPageIndex": 0,
            "moreResultsUrl": "http://www.google.com/search?oe\u003dutf8\u0026ie\u003dutf8\u0026source\u003duds\u0026start\u003d0\u0026hl\u003den\u0026q\u003dstack",
            "searchResultTime": "0.14"
        }
    },
    "responseDetails": null,
    "responseStatus": 200
}

抱歉英语不好非常感谢：）

Answer 1

您正在尝试利用jquery用于提取JSONP数据的全局函数。这不起作用，因为jQuery不会使用您创建的名为myjsonpfunction的函数;相反，他们将为它们的使用创建一个新的将被擦除...你正在进行的处理需要是一个通过AJAX回调调用的新函数，即

<script type="text/javascript">


  function ajaxCallback(data){
      $.each(data.responseData.results, function(i, article){
          $('#searchcontrol').append('<h2>' + article['title'] + '</h2><p>' + article['content'] + '</p>');
      });
  }

  //request data using jsonP
  $(function(){
      $.ajax({
          url:'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&rsz=large&q=stack',
          type:"GET",
          dataType: 'jsonp',
          jsonpCallback: 'myjsonpfunction',
          async:'true'
      }).done(ajaxCallback);
  });
</script>

正如您所看到的，我也使用了done jQuery方法，因为success将被弃用。即使你做它的方式确实有效，你也不应该这样做。

使用jquery读取Google API JSON

1 个答案: