选择选项的格式错误 - JQuery答案

【问题标题】：Formatting of select choices is wrong - JQuery选择选项的格式错误 - JQuery
【发布时间】：2014-07-28 13:51:14
【问题描述】：

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

这是我的 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 上。

谢谢！

【问题讨论】：

标签： javascript jquery html django-views django-ajax-selects

【解决方案1】：

两个问题：

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

您可以通过添加对jQuery.parseJSON 的调用（如果您使用$ 快捷方式，则为$.parseJSON）来强制执行此操作：
```
data = jQuery.parseJSON(data);
```
...作为成功处理程序的第一行（在下面的上下文中显示），但更好的选择是更正服务器发回的Content-Type。服务器应该发回的内容类型是application/json。
您的代码期望返回一个数组，但来自
```
{'option1': ['option1'], 'option2': ['option2'], 'option3': ['option3']}
```
...你引用了，你不是在发回一个数组，你是在发回 like 一个 JSON 对象（但引用无效，请参见下面的 #3）。修复下面的 #3 后，您可以使用 for (var propName in data) 循环遍历属性名称（propName 将是 "option1"、"option2" 等，没有保证顺序） .如果您需要特定顺序，请将您的服务器端输出更改为输出数组：
```
["option1", "option2", "option3"]
```
...然后坚持你现有的循环。
您发回的 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");
        }
    }
});

【讨论】：

@MarkCorrigan：不知道，您使用的是什么服务器端技术？不管是什么，搜索“设置内容类型”或“设置标题”（因为Content-Type 是标准标题）。例如，在 PHP 中，它将是 header("Content-Type: application/json"); 在使用 C# 的 ASP.Net 中，它将是 Response.SetContentType("application/json");
在 firefox 调试器 SyntaxError: JSON.parse: expected property name or '}' 中也出现错误，你知道这是指什么吗？
@MarkCorrigan：可能是上面的#3。当我意识到您使用的是单引号而不是双引号时，我添加了这一点。（我在上面评论中的内容类型示例也是错误的，这要归功于一个错字[已经漫长的一天，现在才下午 3 点！]，点击刷新以确保您在那里看到 application/json。）
data = $.parseJSON(data); // <====== Added 你是认真的吗？ for (var i = 0; i < data.length; i++) { 然后parseJSON ?
@webdeveloper：谢谢，我贴错地方了！固定。

【解决方案2】：

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

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

如果你修复了你的字符串，那么它就会变得正确 json 并使用 JSON.parse() 或 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/

【讨论】：