JSON数据转换为表单字段
JSON Data into form fields
我是Javascript和Jquery的新手,请原谅我的无知。我正试图使用从在线.asp数据库中提取的JSON数据,让我的表单字段根据邮政编码自动填充城市和州。我得到了一个成功的JSON响应,其中的数据可以在我的开发工具窗口中查看,但无法填充表单上的字段。
我的代码是:
$(function() {
var cache = {};
var container = $("#validate");
var errorDiv = container.find("div.text-error");
/** Handle successful response */
function handleResp(data)
{
// Check for error
if (data.error_msg)
errorDiv.text(data.error_msg);
else if ("City" in data)
{
// Set city and state
container.find("input[name='City']").val(data.City);
container.find("input[name='State']").val(data.State);
}
}
// Set up event handlers
container.find("input[name='zipcode']").on("keyup change", function() {
// Get zip code
var zipcode = $(this).val().substring(0, 5);
if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode))
{
// Clear error
errorDiv.empty();
// Check cache
if (zipcode in cache)
{
handleResp(cache[zipcode]);
}
else
{
// Build url
var url = "http://dev.xxx.com/ASPFetchers/GetSPROCAsXML.asp?SPROC=EG_GetZipCodeInfo%20/"+(zipcode)+"/&F=JSON";
// Make AJAX request
$.ajax({
"url": url,
"dataType": "json"
}).done(function(data) {
handleResp(data);
// Store in cache
cache[zipcode] = data;
}).fail(function(data) {
if (data.responseText && (json = $.parseJSON(data.responseText)))
{
// Store in cache
cache[zipcode] = json;
// Check for error
if (json.error_msg)
errorDiv.text(json.error_msg);
}
else
errorDiv.text('Request failed.');
});
}
}
}).trigger("change");
});
我在表格上的标记如下:
<div id="validate">
<label>Zip Code</label>
<input type="text" name="zipcode" id="zipcode" size =" 5" maxlength = "5" />
<div class="text-error"></div>
<label>City</label>
<input type="text" name="City" id="City" />
<label>State</label>
<input type="text" name="State" id="State" />
<script type="text/javascript" src="../zip/includes/zip2.js"></script>
</div>
</div>
我可以在我的开发工具中查看的JSON是(基于邮政编码06702):
{"items":[{"City":"WATERBURY","County":"NEW%20HAVEN","State":"CT","StateName":"CONNECTICUT","Latitude":"0.7252836","Longitude":"-1.274794"},
有人能帮我解决如何从这个字符串中获取信息并将其填充到"城市"answers"州"字段中吗?感谢您的时间和知识。
如果查看此处发布的数据,则需要在数据中使用items
数组。
container.find('input[name="City"]').val(data.items[0].City);
container.find('input[name="State"]').val(data.items[0].StateName);
返回的对象看起来是对象数组。
因此,首先获取项目数组并引用其中的第一个项目。
function handleResp(data) {
// Check for error
if (data.error_msg)
errorDiv.text(data.error_msg);
else if ("City" in data) {
var info = data.items[0];
// Set city and state
container.find("input[name='City']").val(info.City);
container.find("input[name='State']").val(info.State);
}
}
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 添加和删除隐藏字段数组中的值,而不提交表单
- 单击鼠标,用MySQL数据填充html表单输入字段
- 带有条件字段的PHP表单
- 验证PDF表单中的字段
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 在表单中的输入字段上提交事件
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 表单输入字段随着溢出的文本而增长
- 如何将onChange方法添加到ExtJS 4表单中的所有字段(textField)中
- 尝试使用名称访问表中字段的日期选取器时出现问题
- Javascript 表单 - 字段不是必需的
- 单击按钮时更改数据库表的字段值
- 数据表将字段值关联到按钮,而 ajax 填充表
- 返回数据表输入字段
- 更改附加表行字段jQuery的名称
- Angularjs表单/字段验证使用JavaScript函数,无需指令
- 仅在Firefox中,表脱离字段集边界
- 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$_POST数组中的值
- 什么's提交表单后,从post数组中动态附加的表行字段中获取值的问题