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

Why my code is behaving differently on local and not loading correct json response?

本文关键字：加载 响应 json 代码 我的 地表 为什么      更新时间：2023-09-26

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

我找到了这个链接:zipautocomplete

这个链接工作得很好。现在我想复制这段代码，所以右键单击并选择查看页面源代码，在那里我找到了html和ajax代码。

我复制了在本地主机上创建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>

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

当我检查firebug工具的"。NET"输出时，我发现本地输出和链接输出的json响应存在差异。

有谁能帮我一下吗?

尝试更改

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


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

也可能因为跨域请求而无法工作最好的选择是让服务器处理请求

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

zip_json.pl表示服务器上的某物:http://methvin.net/js/zip/zip_json.pl。这不是一个文件，就像您保存的(JSON)，而是一个脚本。点击这里查看:https://github.com/gmethvin/zipcity/blob/master/zip_json.pl

你应该在你自己的电脑上运行，因为你会得到一个错误。

你应该在github上查看源代码，你需要的一切都在那里https://github.com/gmethvin/zipcity

相关文章：