Question

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

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

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

我该怎么做？

注意：我是一名AJAX菜鸟。我在SO和其他地方经历了一些类似的帖子，但遗憾的是我无法弄明白。任何帮助都将非常感谢！

Answer 1

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

2.在mvc控制器中添加ajax方法处理程序，返回arrayList（我更喜欢返回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页。

Answer 2

我找到了我要找的东西！：）

如果其他人在将来发现它有用，我所做的如下：

给id
一个<form:select>
创建了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>

这可能不是一个很好的方法来完成这项工作，但它确实有效。将非常感谢更好的答案！

Spring的<form> select>元素</form：select>的AJAX更新

2 个答案: