0

我的第二个选择下拉列表填充了我从服务器返回的数据的每个字母，而不是每个项目本身。

在此处输入图像描述

这是我的jQuery；

var selected_table = $("#id_TableName option:selected").text();
            $.get('/historicaldata/input_parameters/', { selected_table : selected_table }, function(data){
                for (var i = 0; i < data.length; i++) {
                    for (var key in data[i]) {
                        $('<option />', {
                            value: key,
                            text: data[i][key]
                        }).appendTo("#id_ColumnName");
                    }
                }
            });

在 GET 请求后从我的视图返回时，我的数据看起来像这样；

{'option1': ['option1'], 'option2': ['option2'], 'option3': ['option3']}

尽管我尝试了一些类似的格式并且结果是相同的，但我认为问题出在 JQuery 上。

谢谢！

4

2 回答 2

1

两个问题：

  1. 在我看来，您的服务器Content-Type似乎没有在回复中返回正确的标头，因此 jQuery 没有意识到它是 JSON 并为您自动反序列化它。所以你的循环遍历字符串的字符。

    您可以通过添加调用来强制解决问题jQuery.parseJSON（$.parseJSON如果您使用$快捷方式）：

    data = jQuery.parseJSON(data);

    ...作为成功处理程序的第一行（在下面的上下文中显示），但更好的选择是更正Content-Type服务器正在发回的内容。服务器应该发回的内容类型是application/json.

  2. 您的代码期望返回一个数组，但是从

    {'option1': ['option1'], 'option2': ['option2'], 'option3': ['option3']}

    ...您引用了，您不是在发回一个数组，而是在发回类似于JSON 对象的东西（但带有无效的引号，请参见下面的 #3）。一旦你修复了下面的#3，你就可以使用for (var propName in data)( propNamewill be "option1", "option2", etc., in noGuaranteed order ) 循环遍历属性的名称。如果您需要特定顺序，请将服务器端输出更改为输出数组：

    ["option1", "option2", "option3"]

    ...然后坚持使用现有的循环。

  3. 您发回的 JSON 无效。JSON 要求属性名称和字符串使用双引号 ( ")，而不是单引号 ( ')。所以：

    {"option1": ["option1"], "option2": ["option2"], "option3": ["option3"]}

    ...或者再次使用数组：

    ["option1", "option2", "option3"]

这是parseJSON上下文中的调用，但同样，如果服务器发回正确的 会更好Content-Type，并且您还必须更新访问数据的方式：

var selected_table = $("#id_TableName option:selected").text();
$.get('/historicaldata/input_parameters/', {
    selected_table: selected_table
}, function(data) {
    data = $.parseJSON(data);     // <====== Added
    for (var i = 0; i < data.length; i++) {
        for (var key in data[i]) {
            $('<option />', {
                value: key,
                text: data[i][key]
            }).appendTo("#id_ColumnName");
        }
    }
});
于 2014-07-28T13:54:39.990 回答
0

这是你的例子（你得到字符串）：

演示：http: //jsfiddle.net/5JNSz/

如果你修复你的字符串，让它变得正确json并使用JSON.parse()OR jquery $.parseJSON：

演示：http: //jsfiddle.net/dv9Ly/

注意：对象没有length属性。

如果您修复内容类型问题，这样的事情应该可以工作：

for (var key in data) {
    $('<option />', {
        value: key,
        text: data[key][0]
    }).appendTo("#id_ColumnName");
}

演示：http: //jsfiddle.net/Vm7jQ/

于 2014-07-28T13:59:43.973 回答