Question

我想通过邮政编码实现自动填充的城市和州。

我找到了这个链接：zipautocomplete

此链接正在运行超级。现在我想复制这段代码，然后右键单击并选择了查看页面源代码，在那里我找到了html和ajax代码。

我在我的localhost上复制了创建index.php的代码。我还复制了必要的文件，如jquery.min.js等。

现在我的代码与链接的代码相同，但我没有获得相同的输出。

以下是我复制过的代码：

<!doctype html>
<html>
<head>
<title>ZIP code autocomplete test</title>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.autocomplete.js" type="text/javascript"></script>
<style type="text/css">

body { font-family: Helvetica, Arial, sans-serif; }

.ac_city { font-size: smaller; float: right; width: 70% }
.ac_zip { font-weight: bold; float: left; width: 25%; }

.ac_city, .ac_zip { margin: 0.1em 0; }

</style>
<script type="text/javascript">

$(document).ready(function() {
    $("#zip, #city").autocomplete("zip_json.pl", {
        minChars: 2,
        selectFirst: true,
        matchSubset: true,
        width: 220,
        scrollHeight: 300,
        max: 1024,
        dataType: 'json',
        extraParams: {
            zip: function () {
                return $("#zip:focus").val();
            },
            city: function () {
                var c = $("#city:focus").val();
                return c && c + '%'
            }
        },
        parse: function (data) {
            var a = [];
            for(var i = 0;i < data.length; i++)
                a.push({ data: data[i],
                         value: data[i].zip,
                         result: data[i].zip
                       });
            return a;
        },
        formatItem: function (item) {
            return "<span class='ac_zip'>" + item.zip + "</span>" +
                              "<span class='ac_city'>" + item.city +
                              ", " + item.state + "</span>";
        },
    });
    $("#zip, #city").result(function (event, item) {
        $("#zip").val(item.zip);
        $("#city").val(item.city);
        $("#state").val(item.state);
    });
});

</script>
</head>
<body>
  <p>Enter a zip code or city and it will start autocompleting with 2
  or more chars. Select an item from the list and it will fill in the
  zip, city and state.</p>
  <form>
    <label> ZIP: <input name="zip" id="zip" type="text" size="5" maxlength="5"></label>
    <label> City: <input name="city" id="city" type="text" size="20"></label>
    <label> State: <input name="state" id="state" type="text" size="2" maxlength="2"></label>
  </form>

</body>
</html>

当我在本地检查上面的代码时，实际上代码工作正常，但它没有正确选择杰森回应。当我在zip字段中输入2个数字时，它应显示在该网站上显示的相关邮政编码，但在我当地的浏览器中，它正在加载所有joson_zip.pl文件的json数据。

当我检查＆＃34; NET＆＃34;从firebug工具输出，我发现本地输出和链接输出的json响应不同。

有人可以帮我吗？

Answer 1

在源中有

<script>
    $("#zip, #city").autocomplete("zip_json.pl", {
        ...
    }
</script>

zip_json.pl指的是服务器上的内容：http://methvin.net/js/zip/zip_json.pl。这不是像您保存的文件（JSON），而是script。请在此处查看：https://github.com/gmethvin/zipcity/blob/master/zip_json.pl

您应该在自己的电脑上运行它，因为will get an error。

你应该明确地查看github上的消息来源，你需要的一切都在那里 https://github.com/gmethvin/zipcity

Answer 2

尝试更改

$("#zip, #city").autocomplete("zip_json.pl", {

到

$("#zip, #city").autocomplete("http://methvin.net/js/zip/zip_json.pl", {

由于跨域请求可能无效你最好的选择是让你的服务器处理请求

为什么我的代码在本地表现不同而没有加载正确的json响应？

2 个答案: