调用时不断刷新的Google自定义搜索JSON API

问题描述 投票:1回答:1

由于某些原因,当我使用以下代码在我设置了Google自定义搜索引擎的网站上搜索术语时,它会无限刷新,我相信代码中存在一些我无法捕捉的错误。我从位于here的另一个stackoverflow答案中找到了代码,我想要在这里进行的工作是获取每个搜索查询返回的JSON数据,并显示与正常的Google搜索结果类似的代码。

有人有什么想法可以帮忙吗?

Search.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form action="results.html" id="cse-search-box">
        <div>
            <input class="" name="q" type="text"> 
            <input class="" type="submit">
        </div>
    </form>
</body>
</html>

Results.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>JSON Custom Search API</title>

    <style type="text/css">
        body{
            width: 100%;
        }
        .gs-image{
            max-width: 100px;
        }
    </style>
</head>
<body>
    <h2 style="font-weight: bold; ">Search Results:</h2>
    <div class="gsc-result-info" id="resInfo-0"></div>
    <hr/>
    <div id="googleContent"></div>

    <script>
    //Handler for response from google.
    function hndlr(response) {
        if (response.items == null) {
            //Sometimes the results say there are 34 results/4 pages, but when you click through to 3 then there is only 30, so page 4 is invalid now.
            //So if we get to the invalid one, send them back a page.
            window.location.replace("results.html?start=" + (start - 10) + "&q=" + query);
            return;
        }
        //Search results load time
        document.getElementById("resInfo-0").innerHTML = "About " + response.searchInformation.formattedTotalResults + " results (" + response.searchInformation.formattedSearchTime + " seconds)";
        //Clear the div first, CMS is inserting a space for some reason.
        document.getElementById("googleContent").innerHTML = "";
        //Loop through each item in search results
        for (var i = 0; i < response.items.length; i++) {
            var item = response.items[i];
            var content = "";

            content += "<div class='gs-webResult gs-result'>" +
            "<table class='gsc-table-result'><tbody><tr>";
            //Thumbnail image
            // if (item.pagemap.cse_thumbnail != null)
            //     content += "<td class='gsc-table-cell-thumbnail gsc-thumbnail'><div class='gs-image-box gs-web-image-box gs-web-image-box-portrait'><a class='gs-image' href='" + item.link + "'>" +
            // "<img class='gs-image' class = 'gs-image-box gs-web-image-box gs-web-image-box-portrait' src='" + item.pagemap.cse_thumbnail[0].src + "'></a></td>";
            //Link
            content += "<td><a class='gs-title' href='" + item.link + "'>" + item.htmlTitle + "</a><br/>";
            //File format for PDF, etc.
            if (item.fileFormat != null)
                content += "<div class='gs-fileFormat'><span class='gs-fileFormat'>File Format: </span><span class='gs-fileFormatType'>" + item.fileFormat + "</span></div>";
            //description text and URL text.
            content += item.htmlSnippet.replace('<br>','') + "<br/><div class='gs-bidi-start-align gs-visibleUrl gs-visibleUrl-long' dir='ltr' style='word-break:break-all;'>" + item.htmlFormattedUrl +"</div>" +
            "<br/></td></tr></tbody></table></div>";
            document.getElementById("googleContent").innerHTML += content;
        }
        //Page Controls
        var totalPages = Math.ceil(response.searchInformation.totalResults / 10);
        var currentPage = Math.floor(start / 10 + 1);
        var pageControls = "<div class='gsc-results'><div class='gsc-cursor-box gs-bidi-start-align' dir='ltr'><div class='gsc-cursor'>";
        //Page change controls, 10 max.
        for (var x = 1; x <= totalPages && x<=10; x++) {
            pageControls += "<span class='gsc-cursor-page";
            if (x === currentPage)
                pageControls += "gsc-cursor-current-page";
            var pageLinkStart = x * 10 - 9;
            pageControls+="'><a href='results.html?start="+pageLinkStart+"&q="+query+"'>"+x+"</a>&nbsp;&nbsp;</span>";
        }
        pageControls += "</div></div></div>";
        document.getElementById("googleContent").innerHTML += pageControls;
    }

    //Get search text from query string.a
    var query = document.URL.substr(document.URL.indexOf("q=") + 2);
    var start = document.URL.substr(document.URL.indexOf("start=") + 6, 2);
    if (start === "1&" || document.URL.indexOf("start=") === -1)
        start = 1;

    //Load the script src dynamically to load script with query to call.
    //DOM: Create the script element
    var jsElm = document.createElement("script");
    //Set the type attribute
    jsElm.type = "application/javascript";
    //Make the script element load file
    jsElm.src = "https://www.googleapis.com/customsearch/v1?key=yourAPIkeyHERE&cx=yourSEARCHengineIDhere&start="+start+"&q=" +query +"&callback=hndlr";
    //Finally insert the element to the body element in order to load the script
    document.body.appendChild(jsElm);
</script>
</body>
</html>
javascript html google-api google-custom-search
1个回答
0
投票

我已将您的代码尝试到我的本地环境中。我在响应Google搜索时遇到此错误。

© www.soinside.com 2019 - 2024. All rights reserved.