使用jquery讀取Google API JSON

Question

我想用Google ajax api獲取Google搜索結果，然後將結果附加到DIV中。

谷歌正在使用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作爲success的jQuery方法將被棄用。即使你做到了這一點，你也不應該這樣做。