0

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

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

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

我怎样才能做到这一点？

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

4

2 回答 2

6

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 检查 通过 jQuery AJAX 更新选择框选项？

好读：Spring ajax 3.0页面。

于 2013-03-22T07:31:28.957 回答
0

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

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

  1. 给id我一个<form:select>：

  2. 创建reloadlist.html后，一个页面只跟一个相关的副本<form:select>。

  3. 添加了以下脚本：

<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>

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

于 2013-03-22T11:37:30.350 回答