Spring <form:select> 元素的 AJAX 更新答案

【问题标题】：AJAX update for Spring <form:select> elementSpring <form:select> 元素的 AJAX 更新
【发布时间】：2013-03-22 06:24:19
【问题描述】：

我正在为一个项目使用 Spring MVC。在其中，在特定页面上，我使用 Spring 表单标签来显示添加到控制器中模型的 ArrayList，如下所示：

<form:select path="myList">
    <form:options items="${listElements}"/>
</form:select>

现在，listElements 可以从另一个页面（子窗口）编辑，所以我希望 myList 每 2 秒左右自动更新一次。截至目前，当添加元素时，我正在刷新父窗口；然而，父页面中的表单还有其他字段，用户只需在其中键入数据，因此完全刷新会重置该数据，因为它尚未发布。因此，我想使用 AJAX 每 2 秒更新一次 form:select 元素。

我该怎么做？

注意：我是 AJAX 菜鸟。我在 SO 和其他地方浏览了一些类似的帖子，但遗憾的是我无法弄清楚。任何帮助将不胜感激！

【问题讨论】：

你是否可以访问 jquery 或任何其他库
@ArunPJohny：对于 JQuery，是的。

标签： ajax jsp spring-mvc auto-update

【解决方案1】：

1.在select元素中添加Id属性。

2.在返回arrayList的mvc控制器中添加ajax方法处理程序（我更喜欢返回json对象）。

3.在 jquery/javascript 中触发 ajax 调用

JSP 代码：

<head>
    <link href="<c:url value="/resources/form.css" />" rel="stylesheet"  type="text/css" />
    <script type="text/javascript" src="<c:url value="/resources/jquery/1.6/jquery.js" />"></script>
        <script type="text/javascript">
        var interval =2000;
        setInterval("getServerData()",interval);
        function getServerData(){
            $.getJSON("/MyApp/data/jsonList", function(response){ 
                $("#selectBox option").remove(); 
                    var options = '';
                    $.each(response, function(index, item) {
                        options += '<option value="' + item + '">' + item + '</option>';
                        $("#selectBox").html(options);
                    });
            });
        }
        </script>           
</head>
<body>
    <form:form id="form" method="post">
        <select id="selectBox">
        <select>
    </form:form>    
</body>

控制器代码：

@RequestMapping(value="/data/jsonList", method=RequestMethod.GET)
public @ResponseBody List<String> getDataList() {
    List<String> myList = new ArrayList<String>();
    myList.add("option1");
    myList.add("option2");
    myList.add("option3");
    myList.add("option4");
    return myList;
}

如果你打算使用 jquery 检查 Updating select box options via jQuery AJAX?

Good read: Spring ajax 3.0 页面。

【讨论】：

你能提供一个简单的例子吗？
我不得不删除表单前缀，因为它迫使我编写路径属性和其他属性。但是我认为它可以处理这个例子只是为了展示它是如何完成的。
我现在只能在周末之后尝试一下，但无论如何这对我来说似乎是正确的。如果这对我有用，我会告诉你；提前致谢！

【解决方案2】：

我找到了我要找的东西！ :)

万一别人觉得以后有用，我的做法如下：

给我的<form:select>一个id：
创建了reloadlist.html，一个只有相关<form:select>副本的页面。
添加了以下脚本：

<script type="text/javascript">
function Ajax(){
var xmlHttp;
    try{    
        xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
    }catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
        }catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange=function(){
        document.getElementById('ReloadList').innerHTML=xmlHttp.responseText;
        setTimeout('Ajax()',10000);
    }
    xmlHttp.open("GET","reloadlist.html",true);
    xmlHttp.send(null);
}
window.onload=function(){
    setTimeout('Ajax()',10000);
}
</script>

这可能不是完成这项工作的好方法，但它确实有效。更好的答案将不胜感激！

【讨论】：