Javascript 用json数据填充下拉列表

我试图用JSON页面中的数据填充dropdownbox

以下是我正在使用的代码：

<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>

---

我收到一个错误，即“数据未定义”。我是否必须以某种方式告诉JQ如何读取json数据？

您需要使用

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>

$（文档）.ready（函数（）{
$.ajax({
url:“json/wcf.svc/GetTax”，
数据类型：“json”，
成功：功能（数据）{
$（data.msg）.map（函数（）{
返回$（''）.val（this.value）.text（this.label）；
}).附于（“#税单”）；
}
});
});

首先，您传递给ajax调用的数据变量没有定义（当然，您提供的代码示例中没有定义），其次，ajax调用是异步进行的，因此您需要对返回的数据进行处理，即通过成功回调。例如：

$(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');
        }
    });       
});

$（文档）.ready（函数（）{
var data=//在这里定义
$.ajax({
url:“json/wcf.svc/GetTax”，
数据类型：“json”，
data:data，//在这里传递
成功：功能（数据）
{
$（data.msg）.map（函数（）{
返回$（''）.val（this.value）.text（this.label）；
}).附于（“#税单”）；
}
});       
});

另外，您不需要解析从ajax调用返回的数据，因为jQuery将自动为您解析JSON（应该需要$.parseJSON（data.msg））

编辑

基于JSON的有趣格式，并假设它不能被更改，这应该是可行的（尽管很难看）

$（文档）.ready（函数（）{
var data=//在这里定义
$.ajax({
url:“json/wcf.svc/GetTax”，
数据类型：“json”，
data:data，//在这里传递
成功：功能（数据）
{
data=data.d.replace（/{/g'，）.replace（/}/g'，）.split（'，）；
var-obj=[]；
对于（变量i=0；i

data变量集在哪里？谢谢，现在我可以用firebug查看请求和响应数据。但是，下拉框仍然为空。您位于右侧，但请注意，

map

返回的数组没有

appendTo

方法。谢谢，现在我可以使用firebug查看请求和响应数据。但是，下拉框仍然为空。如果您在firebug中正确获得响应，可能会在成功函数的开头放置一个断点，以再次检查数据对象是否符合您所需的格式，那么我认为map函数没有执行您所需的操作。根据您提供的JOSN的小示例，返回的JSON对象中没有msg属性，因此从我的角度来看，map函数不会做任何事情。请注意，$.map（）jQuery函数和$（'selector'）.map（）jQuery函数之间存在差异。前者应用于处理普通javascript数组或对象，并随后返回数组，后者用于选择器中的一组匹配元素，并返回jQueryobject@OJay，我尝试将它改为“d”，因为这是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.msg).map(function () {
                return $('<option>').val(this.value).text(this.label);
            }).appendTo('#taxList');
        }
    });       
});

$(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);
            }
        });       
    });