2013年1月20日日曜日

JavaScriptによるPOST

単一のフォームについて削除や編集など複数のアクションを実行したい場合、
 リクエストパスを「delete」や「edit」のように変えて実行したいけどどうするのが
一般的なんだろうか。以下のように1つしか書けないし。。

    <form:form method="POST" action="delete">

調べてみたところ、submitボタンではなくbuttonでイベントを分岐し、
JavaScriptでコントロールする方法がよさそう。
実際に試してみてよさそうだったので、備忘録として残します。

以下のIDの値を削除ボタンと編集ボタンを押して、
hiddenでサーバサイドにポストする例です。

 ■JSPフォーム部分
        <c:forEach items="${subjectDtoList}" var="subjectDTO">
            <tr class="record">
            <form:form>
                <td align="center">${subjectDTO.subjectId}</td>
                <td align="left">${subjectDTO.subjectName}</td>
                <td align="center">
                    <input type="button" onclick="deleteBtn();" value="削除" />
                </td>
                <td align="center">
                    <input type=hidden name="subjectId" value="${subjectDTO.subjectId}">
                    <input type="button" onclick="editBtn();" value="編集" />
                </td>
            </form:form>
            </tr>
        </c:forEach>

■JavaScript部分
<SCRIPT Language="JavaScript">
<!--
    //削除の実行
    function deleteBtn(){
        var uri = "deleteSubject";
        moveFormDoPost(uri);
    }
    //編集の実行
    function editBtn(){
        var uri = "showEditSubject";
        moveFormDoPost(uri);
    }
    function moveFormDoPost(uri){
        //サブミット
        document.forms[1].action = uri;
        document.forms[1].method = "POST";
        document.forms[1].submit();
    }
    // -->
</SCRIPT>

■サーバサイド Controller部分

    @RequestMapping(value = "/deleteSubject", method = RequestMethod.POST)
    public ModelAndView deleteSubject(HttpSession session, SubjectDTO subjectDTO) { 省略 }

    @RequestMapping(value = "/showEditSubject", method = RequestMethod.POST)
    public ModelAndView showEditSubject(HttpSession session, SubjectDTO subjectDTO) { 省略 }

0 件のコメント:

コメントを投稿