0

プロジェクトにSpringMVCを使用しています。その中で、特定のページで、Springフォームタグを使用して、コントローラーのモデルに追加されたArrayListを次のように表示しています。

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

さて、別のページ（子ウィンドウ）から編集できるので、2秒程度ごとに自動更新しlistElementsたいです。myList今のところ、要素が追加されたときに親ウィンドウを更新しています。ただし、親ページのフォームには、ユーザーがデータを入力するだけのその他のフィールドがあるため、完全に更新すると、データがまだ投稿されていないため、そのデータがリセットされます。form:selectそのため、AJAXを使用して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 に答える