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

目前我正在进行我的第一个jquery / ajax调用，我遇到了如何将服务器端结果填充到我的列表框中的问题。 弹簧控制器正确地返回数据（希望如此）我只是在填充列表框时遇到了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( $('').html(data) ); } }); } ); }); 

这就是我的控制器的样子：

 @RequestMapping(value="/getVersionsByProjectKey", method = RequestMethod.GET) public @ResponseBody List getVersionsByProjectKey(@RequestParam(value = "projectKey") String projectKey) { List versions = new ArrayList(); versions.add("Chuck"); versions.add("Norris"); versions.add("John"); versions.add("Doe"); return versions; } 

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

正如我之前所说，我现在只是熟悉jquery并尝试了谷歌的几个解决方案但没有快乐。 我试过了：

 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( $('').html(data) ); } 

然后我的列表框只包含一个选项，即ChuckNorrisJohnDoe 。 知道我做错了什么吗？

Answer 1

由于来自Ajax调用的data是数组["Chuck","Norris","John","Doe"] ，您需要使用jQuery.each()迭代它：

使用此functionsuccess ：

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

这将追加/生成：

  Chuck Norris John Doe  

Answer 2

由于您返回的数据是一个数组，您必须遍历它以为每个选项分配每个值。因此，在您的成功回拨尝试类似于：

  success: function(data){ alert('success'); alert(data); var dataLen = data.length; for (i=0; i' + data[i] + ''); } }