[英]Populate dropdown with json data
我正在尝试使用JSON页面中的数据填充下拉列表。
这是我正在使用的代码:
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
data: data
});
$($.parseJSON(data.msg)).map(function () {
return $('<option>').val(this.value).text(this.label);
}).appendTo('#taxList');
});
</script>
这是json数据返回的内容:
{"d":"{\"16\":\"hello\",\"17\":\"world\"}"}
我收到“数据未定义”的错误消息。 我是否必须以某种方式告诉JQ如何读取json数据?
首先,没有定义要传递给ajax调用的数据变量(好吧,不是在您提供的代码示例中),其次,ajax调用是异步发生的,因此您需要对返回的数据执行某些操作,即通过a成功回调。 例:
$(document).ready(function () {
var data = //define here
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
data: data, // pass it in here
success: function(data)
{
$(data.msg).map(function () {
return $('<option>').val(this.value).text(this.label);
}).appendTo('#taxList');
}
});
});
同样,您也不需要解析ajax调用返回的数据,因为jQuery会自动为您解析JSON((需要$ .parseJSON(data.msg)))
编辑
基于JSON的有趣格式,并假设它无法更改,这应该可以工作(虽然很丑)
$(document).ready(function () {
var data = //define here
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
data: data, // pass it in here
success: function(data)
{
data = data.d.replace(/{/g, '').replace(/}/g, '').split(',');
var obj = [];
for (var i = 0; i < data.length; i++) {
obj[i] = {
value: data[i].split(':')[0].replace(/"/g, '').replace('\\', ''),
label: data[i].split(':')[1].replace(/"/g, '')
};
}
var htmlToAppend = "";
for (var j = 0; j < obj.length; j++) {
htmlToAppend += '<option value="' +
obj[j].value +
'">' + obj[j].label +
'</option>';
}
$('#taxList').append(htmlToAppend);
}
});
});
您需要使用success
选项来返回数据。
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
success: function(data){
$(data.msg).map(function () {
return $('<option>').val(this.value).text(this.label);
}).appendTo('#taxList');
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.