我只是尝试（预）用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 ...）但我不想做任何其他事情......; ）
我对调试一无所知，所以要找出这个问题并不容易。
答案 0 :(得分：1)
你需要了解你的KEYS和VALUES是什么。
我在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>
您可以创建键到字段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>