0

好的,我已经为此苦恼了,所以我求助于蜂巢:p

我正在使用带有 jquery 的 google custom search rest api 来获取结果并为浏览器构建结果

我遇到的问题是,这个函数什么都不做ajax call 谁能帮我解决这个问题?

规格:IE版本:8(我知道我公司被反驳了别问...)

代码:

//init varables for getResults
var currentIndex;
var nextIndex;
var prevIndex;
var totalResults;

var urlParams = parseParamsFromUrl();
var queryParamName = "q";

function getResults(startIndex) {

    //clear results for new dataset
    $('.results').html('');

    //      debugger;
    $.ajax({
        url: 'https://www.googleapis.com/customsearch/v1',
        data: {
            key: 'AIzaSyBsiF3yLVphOd6c74PYOA-02iJx6dlmQuI',
            cx: '003411025563286140424:apyyekjazdi',
            q: urlParams[queryParamName],
            start: startIndex
        },
        success: function (data) {

            //set some variables for later use.
            currentIndex = data.queries.request[0]['startIndex'];
            nextIndex = data.queries.nextPage[0]['startIndex'];
            totalResults = data.searchInformation.totalResults;

            //              debugger;

            //if there are 0 results return nothing found
            if (totalResults === '0') {
                $('.results').html('<h3 class="three column centered">No results found!</h3>');
            }

            //check if theres more than 10 results to show the next button
            if (totalResults > 10) {
                $('.next').removeClass('hide');
            }

            if (currentIndex !== 1) {
                prevIndex = data.queries.previousPage[0]['startIndex'];
            }

            //if current index is 1 hide previous button
            if (currentIndex > 1) {
                $('.prev').removeClass('hide');
            } else {
                $('.prev').addClass('hide');
            }

            //hide query status
            $('.resultspinner').hide();

            //loop through all promotion results and add before regulars
            var promoresult;
            if (typeof data.promotions != 'undefined') {

                //show promotions div
                $('.promotions').show();

                $.each(data.promotions, function (index, value) {
                    //check if promotion has a description if so set it in the result
                    var promotionbody;

                    if (typeof value.bodyLines !== 'undefined') {
                        promotionbody = value.bodyLines['0']['htmlTitle'];
                    } else {
                        promotionbody = '';
                    }

                    //check if result has an image if so show in results if not display default
                    if (typeof value.image == 'undefined') {
                        var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img src="http://www.insp.com/wp-content/themes/insp_foundation/images/thumbnail.jpg" />\n\
                                </a>\n\
                            </div>';
                    } else {
                        var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img width="120" src="' + value.image.source + '" />\n\
                                </a>\n\
                            </div>';
                    }

                    //build layout for result
                    var promoresult = '\n\
                        <div class="search-result row promotion" id="post-' + index + '">\n\
                                   ' + thumbnail + '\n\
                    \n\
                        <div class="post-entry nine columns" >\n\
                            <h3 class="posttitle">\n\
                                <a href="' + value.link + '"> ' + value.title + '</a>\n\
                            </h3>\n\
                            \n\
                            <div class="entry">\n\
                                ' + promotionbody + '\n\
                            </div>\n\
                        </div>';
                    $('.promotions').append(promoresult);
                });
                //                    $('.promotions').prepend('<h4>Promotions: </h4>');
            }

            //loop through all regular results
            $.each(data.items, function (index, value) {
                //check if result has an image if so show in results if not display default
                if (typeof value.pagemap.metatags['0']['og:image'] == 'undefined') {
                    var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img src="http://www.insp.com/wp-content/themes/insp_foundation/images/thumbnail.jpg" />\n\
                                </a>\n\
                            </div>';
                } else {
                    var thumbnail = '\n\
                           <div class="thumb-box three column"> \n\
                                <a href="' + value.link + '">\n\
                                    <img width="120" src="' + value.pagemap.metatags['0']['og:image'] + '" />\n\
                                </a>\n\
                            </div>';
                }

                //build layout for result
                var result = '\n\
                        <div class="search-result row result" id="post-' + index + '">\n\
                                   ' + thumbnail + '\n\
                    \n\
                        <div class="post-entry nine columns" >\n\
                            <h3 class="posttitle">\n\
                                <a href="' + value.link + '"> ' + value.pagemap.metatags[0]['og:title'] + '</a>\n\
                            </h3>\n\
                            \n\
                            <div class="entry">\n\
                                ' + value.htmlSnippet + '\n\
                            </div>\n\
                        </div>';


                //set data to result
                $('.results').append(result);

            });
            //                $('.results').prepend('<h4>Results: </h4>');

        },
        error: function (jqXHR, exception) {
            if (jqXHR.status === 0) {
                alert('Not connect.\n Verify Network.');
            } else if (jqXHR.status == 404) {
                alert('Requested page not found. [404]');
            } else if (jqXHR.status == 500) {
                alert('Internal Server Error [500].');
            } else if (exception === 'parsererror') {
                alert('Requested JSON parse failed.');
            } else if (exception === 'timeout') {
                alert('Time out error.');
            } else if (exception === 'abort') {
                alert('Ajax request aborted.');
            } else {
                alert('Uncaught Error.\n' + jqXHR.responseText);
            }
        },
        dataType: 'json'
    });
}
4

2 回答 2

2

我相当确定您不能使用 AJAX 来获取不同域上的文件。您必须在服务器上调用服务器端脚本,该脚本本身会调用 API 并重新调整数据。

于 2012-07-13T14:00:56.970 回答
0

事实证明,IE 的所有失败都完全忽略了任何跨域 ajax 请求,无论是否允许,您都必须使用服务器端替代方案来实现这一点。

于 2012-07-13T15:22:14.163 回答