我只是尝试使用 JSON 数据(预)填充一些表单字段，但它不起作用。
这是我的脚本和表单字段:
$(document).on('change', '#wf_id', function() {
$.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(),
function(data) {
$.each(data.results[0], function(i, item) {
if (item == "name_and_origin") {
$("#wf_name_and_origin").val(item);
} else if (item == "ueln") {
$("#wf_ueln").val(item);
} else if (item == "date_of_birth") {
$("#datepicker_15").val(item);
} else if (item == "color_code") {
$("#wf_color_code").val(item);
} else if (item == "color") {
$("#wf_color").val(item);
} else if (item == "country_located") {
$("#wf_country_located").val(item);
} else if (item == "fate") {
$("#wf_fate").val(item);
} else if (item == "microchip") {
$("#wf_microchip").val(item);
} else if (item.father == "id") {
$("#wf_father_id").val(item);
} else if (item.father == "name_and_origin") {
$("#wf_father_name_and_origin").val(item);
} else if (item.mother == "id") {
$("#wf_mother_id").val(item);
} else if (item.mother == "name_and_origin") {
$("#wf_mother_name_and_origin").val(item);
}
});
});
});<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
<option value="0" selected="selected">Bitte auswählen…</option>
<option value="1">Stute</option>
<option value="2">Hengst</option>
<option value="3">Wallach</option>
<option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />来自apis.is的数据如下:
{
"results":[
{
"id":"IS1987187700",
"name_and_origin":"Oddur frá Selfossi",
"ueln":"352002987187700",
"date_of_birth":"15.06.1987",
"color_code":"4521",
"color":"Palomino with a star flaxen mane and tail",
"country_located":"IS",
"fate":"Put down",
"microchip":null,
"father":{
"id":"IS1981157025",
"name_and_origin":"Kjarval frá Sauðárkróki"
},
"mother":{
"id":"IS1972287521",
"name_and_origin":"Leira frá Þingdal"
}
}
]
}如果我在 wf_id 中填写一个新值，脚本似乎会执行“某些操作”(考虑询问 apis.is...)，但我不想做任何事情还有其他事情要做...;)
我对调试一无所知，所以不太容易找出问题所在。
请您参考如下方法:
您需要了解您的键和值是什么。
我注释掉了 XHR 调用逻辑上的 onChange，以便简单地迭代您提供的数据。
编辑
我使用字段映射循环和函数创建了下面的第二个示例，以实现可扩展性和可重用性。
var data = {
"results": [{
"id": "IS1987187700",
"name_and_origin": "Oddur frá Selfossi",
"ueln": "352002987187700",
"date_of_birth": "15.06.1987",
"color_code": "4521",
"color": "Palomino with a star flaxen mane and tail",
"country_located": "IS",
"fate": "Put down",
"microchip": null,
"father": {
"id": "IS1981157025",
"name_and_origin": "Kjarval frá Sauðárkróki"
},
"mother": {
"id": "IS1972287521",
"name_and_origin": "Leira frá Þingdal"
}
}]
};
//$(document).on('change', '#wf_id', function() {
// $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(), function(data) {
$.each(data.results[0], function(key, value) {
if (key === "name_and_origin") {
$("#wf_name_and_origin").val(value);
} else if (key === "ueln") {
$("#wf_ueln").val(value);
} else if (key === "date_of_birth") {
$("#datepicker_15").val(value);
} else if (key === "color_code") {
$("#wf_color_code").val(value);
} else if (key === "color") {
$("#wf_color").val(value);
} else if (key === "country_located") {
$("#wf_country_located").val(value);
} else if (key === "fate") {
$("#wf_fate").val(value);
} else if (key === "microchip") {
$("#wf_microchip").val(value);
} else if (key.father === "id") {
$("#wf_father_id").val(value);
} else if (key.father === "name_and_origin") {
$("#wf_father_name_and_origin").val(value);
} else if (key.mother === "id") {
$("#wf_mother_id").val(value);
} else if (key.mother === "name_and_origin") {
$("#wf_mother_name_and_origin").val(value);
}
});
// });
//});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
<option value="0" selected="selected">Bitte auswählen…</option>
<option value="1">Stute</option>
<option value="2">Hengst</option>
<option value="3">Wallach</option>
<option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
</form>版本 2
您可以创建键到字段 ID 的映射。这样您就可以循环任何字段。
var data = {
"results": [{
"id": "IS1987187700",
"name_and_origin": "Oddur frá Selfossi",
"ueln": "352002987187700",
"date_of_birth": "15.06.1987",
"color_code": "4521",
"color": "Palomino with a star flaxen mane and tail",
"country_located": "IS",
"fate": "Put down",
"microchip": null,
"father": {
"id": "IS1981157025",
"name_and_origin": "Kjarval frá Sauðárkróki"
},
"mother": {
"id": "IS1972287521",
"name_and_origin": "Leira frá Þingdal"
}
}]
};
// Map object keys to fields.
var keyToFieldMap = {
"name_and_origin" : "#wf_name_and_origin",
"ueln" : "#wf_ueln",
"date_of_birth" : "#datepicker_15",
"color_code" : "#wf_color_code",
"color" : "#wf_color",
"country_located" : "#wf_country_located",
"fate" : "#wf_fate",
"microchip" : "#wf_microchip",
"father" : {
"id" : "#wf_father_id",
"name_and_origin" : "#wf_father_name_and_origin"
},
"mother" : {
"id" : "#wf_mother_id",
"name_and_origin" : "#wf_mother_name_and_origin"
}
};
function isObject(val) {
if (val === null) { return false; }
return ((typeof val === 'function') || (typeof val === 'object'));
}
function populateFormFromData(data, mapping) {
$.each(data, function(key, value) {
var field = keyToFieldMap[key];
if (isObject(field)) {
$.each(value, function(subKey, subValue) {
$(field[subKey]).val(subValue);
});
} else {
$(field).val(value);
}
});
}
//$(document).on('change', '#wf_id', function() {
// $.getJSON("http://apis.is/horses?id=" + $("#wf_id").val(), function(data) {
populateFormFromData(data.results[0], keyToFieldMap);
// });
//});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="fields[1]" id="wf_id" maxlength="150" value="" />
<input type="text" name="fields[2]" id="wf_name_and_origin" maxlength="150" value="" />
<select name="fields[25]" id="gender" size="1">
<option value="0" selected="selected">Bitte auswählen…</option>
<option value="1">Stute</option>
<option value="2">Hengst</option>
<option value="3">Wallach</option>
<option value="4">Geschl. unbekannt</option>
</select>
<input type="text" name="fields[14]" id="wf_ueln" maxlength="150" value="" />
<input type="text" class="datepicker" name="fields[15]" id="datepicker_15" maxlength="20" value="" />
<input type="text" name="fields[16]" id="wf_color_code" maxlength="150" value="" />
<input type="text" name="fields[17]" id="wf_color" maxlength="150" value="" />
<input type="text" name="fields[18]" id="wf_country_located" maxlength="150" value="" />
<input type="text" name="fields[19]" id="wf_fate" maxlength="150" value="" />
<input type="text" name="fields[20]" id="wf_microchip" maxlength="150" value="" />
<input type="text" name="fields[21]" id="wf_father_id" maxlength="150" value="" />
<input type="text" name="fields[22]" id="wf_father_name_and_origin" maxlength="150" value="" />
<input type="text" name="fields[23]" id="wf_mother_id" maxlength="150" value="" />
<input type="text" name="fields[24]" id="wf_mother_name_and_origin" maxlength="150" value="" />
</form>
