如何在输入值和选择列表中插入json输出

时间:2013-07-09 18:37:44

标签: jquery json

我目前有一个脚本,一旦提供了有效的邮政编码,就会显示城市和州。目前我可以将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());
            }
        });
    });
});

1 个答案:

答案 0 :(得分:0)

您正在将AJAX请求绑定到邮政编码输入的keyup。我假设最初文本框是空的。在第一个键上,keyup处理程序中的ZIPCode变量将获取框中的值。说你输入&#39; 6&#39;。在这种情况下,您将向以下网址发出AJAX请求 - 请注意&#39; 6&#39;用于地址查询字符串参数:

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

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

var ZIPCode = jQ9('#PostalCode').val();
if(ZIPCode.length == 5){
    //Ajax request