在 spring mvc 环境中使用查询使用 ajax 调用的结果填充列表框选项。

目前，我正在处理我的第一个 jquery/ajax 调用，并且在如何将服务器端结果填充到我的列表框中时遇到问题。 spring 控制器正确地返回数据（希望如此），我只是在填充列表框时遇到了 jquery 部分的问题。

这是我的 ajax 调用

    $(function() {
     $projectKey = $('#projectKey');

    $projectKey.change (
        function() {
            $.ajax({
                type: "GET",
                url: "getVersionsByProjectKey",
                data: {"projectKey": $projectKey.val() },
                dataType: 'json',
                success: function(data){
                     alert('success');
                     alert(data);
                     $('#jiraVersion').append(
                             $('<option></option>').html(data)
                         );
                }
            });
        }
    );
});

这就是我的控制器看起来像：

@RequestMapping(value="/getVersionsByProjectKey", method = RequestMethod.GET)
  public @ResponseBody List<String> getVersionsByProjectKey(@RequestParam(value = "projectKey") String projectKey) {  

        List<String> versions = new ArrayList<String>();
        versions.add("Chuck");
        versions.add("Norris");
        versions.add("John");
        versions.add("Doe");

        return versions;  
    }

这是我要填充数据的列表框：

<td>
<form:select path="jiraVersion" id="jiraVersion">

</form:select>
</td>

正如我之前所说，我现在只是熟悉 jquery，并尝试了 google 的一些解决方案，但没有任何乐趣。我试过：

success: function(data){
         alert('success');
         alert(data);
         $.each(data, function(index, item) {
         $("#jiraVersion").get(0).options[$("#jiraVersion").get(0).options.length] =    
         new Option(item.Display, item.Value);
       });}

等等等等

警报（'成功'）写给我：Chuck,Norris,John,Doe.

如果我直接发送请求/getVersionsByProjectKey?projectKey=AIL

我回来了["Chuck","Norris","John","Doe"]

而且我也尝试修改success具有：

success: function(data){
     alert('success');
     alert(data);
     $('#jiraVersion').append(
        $('<option></option>').html(data)
     );

 }

然后我的列表框只包含一个选项，即查克·诺里斯·约翰·多伊。知道我做错了什么吗？

As the data来自 Ajax 调用的是数组["Chuck","Norris","John","Doe"]，您需要使用迭代它jQuery.each() http://api.jquery.com/jquery.each/:

使用此函数作为success:

success: function(data){
    $.each(data, function(index, value) {
        $('#jiraVersion').append($('<option>').text(value).val(index));
    });
}

这将附加/生成：

<form:select path="jiraVersion" id="jiraVersion">
    <option value="0">Chuck</option>
    <option value="1">Norris</option>
    <option value="2">John</option>
    <option value="3">Doe</option>
</form:select>