-2

我目前有一个脚本，一旦提供了有效的邮政编码，就会显示城市和州。目前，我可以将 json 输出打印为文本，但是当我尝试作为输入值和选择值插入时，我什么也得不到。这是我正在使用的代码

HTML

<div class="container-fluid">
    <div class="wrapper">
        <div class="row-fluid">
            <div class="span4 offset4">
                <div class="well">
                     <h4>Info from ZIP Code</h4>

                    <label>Enter a Zip Code</label>
                    <input id="PostalCode" type="text" placeholder="A legit ZIP Code.">
                    <p><span class="label label-info">City</span>  <span id="ContactCity"></span>
                    </p>
                    <div class="optionfield" id="fieldContactCity">
                        <label class="optionLabel" for="ContactCity">Contact City</label>
                        <input type="text" class="" value="" name="ContactCity" id="ContactCity">
                    </div>
                    <p><span class="label label-info">State</span>  <span id="State"></span>
                    </p>
                    <div class="optionfield" id="fieldState">
                        <label class="optionLabel" for="State">Contact State</label>
                        <div class="ap_block_clearing" id="sState">
                            <select name="State" id="State">
                                <option value="">- Select -</option>
                                <option value="Alabama">Alabama</option>
                                <option value="Alaska">Alaska</option>
                                <option value="Arizona">Arizona</option>
                                <option value="Arkansas">Arkansas</option>
                                <option value="California">California</option>
                                <option value="Colorado">Colorado</option>
                                <option value="Connecticut">Connecticut</option>
                                <option value="Delaware">Delaware</option>
                                <option value="District of Columbia">District of Columbia</option>
                                <option value="Florida">Florida</option>
                                <option value="Georgia">Georgia</option>
                                <option value="Hawaii">Hawaii</option>
                                <option value="Idaho">Idaho</option>
                                <option value="Illinois">Illinois</option>
                                <option value="Indiana">Indiana</option>
                                <option value="Iowa">Iowa</option>
                                <option value="Kansas">Kansas</option>
                                <option value="Kentucky">Kentucky</option>
                                <option value="Louisiana">Louisiana</option>
                                <option value="Maine">Maine</option>
                                <option value="Maryland">Maryland</option>
                                <option value="Massachusetts">Massachusetts</option>
                                <option value="Michigan">Michigan</option>
                                <option value="Minnesota">Minnesota</option>
                                <option value="Mississippi">Mississippi</option>
                                <option value="Missouri">Missouri</option>
                                <option value="Montana">Montana</option>
                                <option value="Nebraska">Nebraska</option>
                                <option value="Nevada">Nevada</option>
                                <option value="New Hampshire">New Hampshire</option>
                                <option value="New Jersey">New Jersey</option>
                                <option value="New Mexico">New Mexico</option>
                                <option value="New York">New York</option>
                                <option value="North Carolina">North Carolina</option>
                                <option value="North Dakota">North Dakota</option>
                                <option value="Ohio">Ohio</option>
                                <option value="Oklahoma">Oklahoma</option>
                                <option value="Oregon">Oregon</option>
                                <option value="Pennsylvania">Pennsylvania</option>
                                <option value="Rhode Island">Rhode Island</option>
                                <option value="South Carolina">South Carolina</option>
                                <option value="South Dakota">South Dakota</option>
                                <option value="Tennessee">Tennessee</option>
                                <option value="Texas">Texas</option>
                                <option value="Utah">Utah</option>
                                <option value="Vermont">Vermont</option>
                                <option value="Virginia">Virginia</option>
                                <option value="Washington">Washington</option>
                                <option value="West Virginia">West Virginia</option>
                                <option value="Wisconsin">Wisconsin</option>
                                <option value="Wyoming">Wyoming</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery

var jQ9 = $.noConflict(true);
jQ9(document).ready(function () {
    jQ9("#PostalCode").keyup(function () {
        var ZIPCode = jQ9('#PostalCode').val();
        jQ9.ajax({
            dataType: "json",
            url: 'http://maps.googleapis.com/maps/api/geocode/json?address=' + ZIPCode + '&sensor=false',
            success: function (jsonData) {
                // Do stuff after the JSON arrives.
                console.log('Success!');

                //Let's make some variables to keep our code clean.
                var city = jsonData.results[0].address_components[1].long_name;
                var county = jsonData.results[0].address_components[2].long_name;
                var state = jsonData.results[0].address_components[3].long_name;

                // Setting the target spans to the values we want to show.
                jQ9('#ContactCity').text(city.toString());
                jQ9('#State').text(state.toString());
            }
        });
    });
});
4

1 回答 1

0

您将 AJAX 请求绑定到keyup邮政编码输入。我会假设最初文本框是空的。在第一次按键时，按键处理程序中的 ZIPCode 变量将获得框中的值。假设您输入了“6”。在这种情况下，您将向以下 URL 发出 AJAX 请求 - 请注意地址查询字符串参数的“6”：

http://maps.googleapis.com/maps/api/geocode/json?address=6&sensor=false

手动执行该请求，您可以清楚地看到address_componentsJSON 对象的属性不包含address_components[3]. 你只需要调整你的代码来处理它。您还可以检查邮政编码输入值的长度是否为 5（对于 5 位数的邮政编码）并在这种情况下仅执行 AJAX 代码，但我仍会检查该数组是否包含该索引处的元素当然。

var ZIPCode = jQ9('#PostalCode').val();
if(ZIPCode.length == 5){
    //Ajax request
于 2013-07-09T19:01:04.360 回答