0

我对此进行了很多研究，但找不到魔法。其实我想填充城市密码的列表。使用 JQuery 自动完成 UI。这是一个https页面。它适用于 Firefox，但不适用于 Google Chrome。谁能帮我解决这个问题。提前致谢。

以下是我的代码：

function zipAutoCompletet(prefix) {
    jQuery("#" + prefix + "_zip").autocomplete({
        source: function(request, response) {
            jQuery.ajax({
                url: "http://ws.geonames.org/postalCodeSearchJSON",
                dataType: "jsonp",
                data: {
                    style: "full",
                    maxRows: 12,
                    postalcode_startsWith: request.term
                },
                success: function(data) {
                    response(
                        jQuery.map(data.postalCodes, function(item) {
                            return {
                                label:
                                    item.placeName +
                                    (item.adminCode1
                                        ? ", " + item.adminCode1
                                        : "") +
                                    ", " +
                                    item.postalCode +
                                    ", " +
                                    item.countryCode,
                                value: item.postalCode
                            };
                        })
                    );
                    jQuery(".ui-autocomplete").css("width", "188px");
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            var myString = new String(ui.item.label);
            var address = myString.split(",");

            jQuery("#" + prefix + "_city").val(address[0]);
            jQuery("#" + prefix + "_city").addClass("activated");
            jQuery("#" + prefix + "_city").trigger("change");
            jQuery("#" + prefix + "_city")
                .parents(".row")
                .removeClass("error-row");
            jQuery("#" + prefix + "_city")
                .parents(".row")
                .addClass("ok-row");

            var countryCode = address[3] ? address[3] : address[2];
            countryCode = jQuery.trim(countryCode);
            var countryName = jQuery(
                "#" +
                    prefix +
                    '_country option[value="' +
                    jQuery.trim(countryCode) +
                    '"]'
            ).text();
            jQuery("#countryContainer .jqTransformSelectWrapper span").html(
                countryName
            );
            jQuery("#countryContainer .jqTransformSelectWrapper").addClass(
                "selected-jqtranform"
            );
            jQuery("#" + prefix + "_country")
                .parents(".row")
                .addClass("ok-row");
            jQuery("#" + prefix + "_country")
                .parents(".row")
                .removeClass("error-row");
            jQuery("#" + prefix + "_country").val(jQuery.trim(countryCode));

            var stateCode = address[2] ? address[1] : "";
            stateCode = jQuery.trim(stateCode);

            if (countryCode == "US") {
                var base = base_url;
                base = base.replace("https", "http");

                jQuery.ajax({
                    url: base + "/getStateName",
                    dataType: "jsonp",
                    data: { stateCode: stateCode },
                    success: function(data) {
                        stateName = data;

                        jQuery("#jc_state").val(stateName);
                        jQuery("#jc_state").addClass("activated");
                        jQuery("#jc_state")
                            .parents(".row")
                            .removeClass("error-row");
                        jQuery("#jc_state")
                            .parents(".row")
                            .addClass("ok-row");
                        jQuery("#jc_state").trigger("change");
                        formValidate();
                    }
                });
            } else {
                stateName = stateCode;

                jQuery("#jc_state").val(stateName);
                jQuery("#jc_state").addClass("activated");
                jQuery("#jc_state")
                    .parents(".row")
                    .removeClass("error-row");
                jQuery("#jc_state")
                    .parents(".row")
                    .addClass("ok-row");
                jQuery("#jc_state").trigger("change");
                formValidate();
            }

            jQuery("#" + prefix + "_zip")
                .parents(".row")
                .addClass("ok-row");
            jQuery("#" + prefix + "_zip")
                .parents(".row")
                .removeClass("error-row");
        },
        open: function() {
            jQuery(this)
                .removeClass("ui-corner-all")
                .addClass("ui-corner-top");
        },
        close: function() {
            jQuery(this)
                .removeClass("ui-corner-top")
                .addClass("ui-corner-all");
        },
        change: function(event, ui) {
            if (ui.item === null) {
                jQuery("#" + prefix + "_zip")
                    .parents(".row")
                    .removeClass("ok-row");
                jQuery("#" + prefix + "_zip")
                    .parents(".row")
                    .addClass("error-row");
                $("#" + prefix + "_zip").val("");
            }
        }
    });
}
4

1 回答 1

2

如果您在 https 页面上，浏览器将阻止对非安全资源 (http) 的请求。您应该经常看到一些关于此的通知。看起来其他浏览器默认不会阻止安全页面上的非安全 AJAX 请求，但 google chrome 会。

在您的代码中，您有硬编码的 URL：

url: "http://ws.geonames.org/postalCodeSearchJSON",

如果那是跨域请求并且它支持 HTTPS，你可以这样改变它：

url: "//ws.geonames.org/postalCodeSearchJSON",

如您所见，此处未指定协议。浏览器将采用页面默认协议（http 或 https）并使用它来请求数据。

于 2013-01-30T15:44:21.270 回答