Question

我想从Google的Suggest API中提取数据并将其显示在我的页面中（可能通过追加功能）。我对解析JSON而不是XML很有信心，据我所知，谷歌不提供JSON中的这个API。

我该怎么做？ 或者，是否有人知道如何在JSON中访问此API？如果有人这样做会很棒！

API地址为：http://google.com/complete/search?q=google&output=toolbar

我目前的代码是：

        $.ajax({
            type: "GET",
            url: "http://google.com/complete/search?q=google&output=toolbar",
            dataType: "xml",
            crossDomain: true,
            xhrFields: { withCredentials: true },
            success: function(xml) {
                $(xml).find('toplevel').each(function(){
                    var title = $(this).find('suggestion').text();
                    $('<b>'+title+'</b>').appendTo('#page-wrap');
                });
            }
        });

我得到的错误是：XMLHttpRequest cannot load http://google.com/complete/search?q=wixiy&output=toolbar. Origin is not allowed by Access-Control-Allow-Origin.

Answer 1

当然，jQuery CAN 解析XML。查看the $.ajax docs page - 它说

转换器（已添加1.5） dataType-to-dataType转换器的映射。每个转换器的值都是一个返回响应的转换值的函数。

所以你的ajax调用应该只设置那个设置。

$.ajax({ url: "apiUrl", converters: "text xml" });

Answer 2

您可以使用DomParser https://developer.mozilla.org/en-US/docs/DOM/DOMParser

var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

Answer 3

由于API不支持JSON，因此您无法在javascript中执行此操作，因为默认情况下它不允许跨域请求。因此，您需要一个像PHP文件这样的中间服务器端页面，它从谷歌处理xml请求并将xml传递给您。

<强>的Javascript

$.ajax({
    type: "GET",
    url: "getData.php?q=google&output=toolbar",
    dataType: "xml",
    success: function(xml){
        $(xml).find("CompleteSuggestion").each(function(){
            var suggestion = $( this ).find( 'suggestion' ).attr( 'data' );
            var num_queries = $( this ).find( 'num_queries' ).attr( 'int' );
            alert( suggestion + ' has ' + num_queries + ' queries.' );
        });
    }
});

PHP（getData.php） - 此文件位于同一台服务器上

$query = $_GET[ 'q' ];
$out = $_GET[ 'output' ];

header('Content-Type: text/xml');
echo file_get_contents('http://google.com/complete/search?q='.$query.'&output='.$out);

...或者，您可以直接json_encode并将JSON发送到您的脚本，也可以轻松解析。

希望这有帮助。

使用jQuery读取XML数据

3 个答案: