2

我正在尝试使用来自 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 数据？

4

2 回答 2

4

首先，您传递给 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');
        }
    });       
});

您也不需要解析从 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);
            }
        });       
    });
于 2013-03-03T20:59:26.480 回答
1

您需要使用该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>
于 2013-03-03T20:52:49.353 回答