javascript - 选择选项的格式错误 - JQuery

Question

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

这是我的 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 请求之后从我的 View 返回时，我的数据看起来像这样；

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

虽然我尝试了一些类似的格式，但结果是相同的，所以我认为问题出在 JQuery 上。

谢谢!

Answer 1

两个问题:

1. 在我看来，您的服务器似乎没有在回复中返回正确的 Content-Type header ，因此 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) 循环遍历属性名称(propName 将是 "option1"、“选项2”等，不保证顺序)。如果您需要特定的顺序，请将服务器端输出更改为输出数组:

   ["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");
        }
    }
});