jQuery 在 spring mvc 环境中使用查询使用 ajax 调用的结果填充列表框选项。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21007304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate listbox options with result of an ajax call using query in spring mvc environment.
提问by shippi
Currently I am working on my first jquery/ajax call and I'm having issues with how to populate the server side results into my listbox. The spring controller returns me the data correctly (hopefully) i just have issues with the jquery part with filling the listbox.
目前，我正在处理我的第一个 jquery/ajax 调用，但在如何将服务器端结果填充到我的列表框中时遇到了问题。spring 控制器正确返回数据（希望如此）我只是在填充列表框时遇到了 jquery 部分的问题。
Here is my ajax call
这是我的 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)
);
}
});
}
);
});
This is how my Controllerlook like:
这是我的控制器的样子：
@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;
}
This is the listbox that I want to fill the data in:
这是我要填充数据的列表框：
<td>
<form:select path="jiraVersion" id="jiraVersion">
</form:select>
</td>
As I said before, I am just familiarizing myself with the jquery now and tried a couple of solutions from google but no joy. I tried:
正如我之前所说，我现在只是熟悉 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);
});}
etc etc.
等等等等
The alert('success') writes me: Chuck,Norris,John,Doe.
警报（'成功'）写给我：Chuck,Norris,John,Doe。
If I send directly the request /getVersionsByProjectKey?projectKey=AIL
如果我直接发送请求 /getVersionsByProjectKey?projectKey=AIL
i am getting back ["Chuck","Norris","John","Doe"]
我回来了 ["Chuck","Norris","John","Doe"]
And I also tried to modify the successto have:
而且我还尝试将其修改success为：
success: function(data){
alert('success');
alert(data);
$('#jiraVersion').append(
$('<option></option>').html(data)
);
}
Then my listbox contains just one option which is ChuckNorrisJohnDoe. Any idea what I am doing wrong?
然后我的列表框只包含一个选项，即ChuckNorrisJohnDoe。知道我做错了什么吗？
采纳答案by acdcjunior
As the datafrom the Ajax call is the array ["Chuck","Norris","John","Doe"], you need to iterate through it using jQuery.each():
由于data来自 Ajax 调用的是数组["Chuck","Norris","John","Doe"]，您需要使用jQuery.each()以下方法遍历它：
Use this function as success:
将此函数用作success：
success: function(data){
$.each(data, function(index, value) {
$('#jiraVersion').append($('<option>').text(value).val(index));
});
}
This will append/generate:
这将附加/生成：
<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>
回答by Stefanos Vakirtzis
Since your returned data is an array you have to loop through it to assign each value to each option.Thus, on your success call back try something like :
由于您返回的数据是一个数组，您必须遍历它以将每个值分配给每个选项。因此，在您成功回调时，请尝试以下操作：
success: function(data){
alert('success');
alert(data);
var dataLen = data.length;
for (i=0; i<dataLen; i++) {
$('#jiraVersion').append('<option value="' + data[i] + '">' + data[i] + '</option>');
}
}
