我目前有一个脚本,一旦提供了有效的邮政编码,就会显示城市和州。目前我可以将json输出打印为文本,但是当我尝试作为输入值和选择值插入时,我什么也得不到。这是我正在使用的代码
<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>
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());
}
});
});
});
答案 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