web-dev-qa-db-ja.com

SpringBootアプリケーションのThymeleafテーブルからHTTP POSTリクエストを行うことはできますか？

単純なSpringBootアプリケーションにThymeleafテンプレートがあります。テンプレートには、次のようにテーブルにリストが含まれています。

<p>There are <span th:text="${#lists.size(persons)}"></span> people:</p>
<table th:if="${not #lists.isEmpty(persons)}" border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Address</th>
        <th>Telephone</th>
        <th>Email</th>
        <th>Actions</th>
    </tr>
    <tr th:each="person : ${persons}">
        <td th:text="${person.personId}"></td>
        <td th:text="${person.name}"></td>
        <td th:text="${person.address}"></td>
        <td th:text="${person.telephone}"></td>
        <td th:text="${person.email}"></td>
        <td>
            <a href="#" data-th-href="@{/edit(personId=${person.personId})}">Edit</a> |
            <a href="#" data-th-href="@{/delete(personId=${person.personId})}">Delete</a>
        </td>
    </tr>
</table>

表の最後のセルに従って編集および削除機能を有効にしたい。ただし、現時点では、両方のリクエストはHTTPGETに対するものです。これは、編集のために個人の詳細がサーバーからフェッチされる編集には問題ありませんが、サーバー上のデータが変更されるため、削除によってPOSTリクエストがトリガーされます。

Thymeleafがテーブルの行ごとにPOSTリクエストを許可するかどうかを誰かが知っていますか？または行ごとに単純なHTMLフォームを作成する必要がありますか？

GETフォームは現在次のとおりです。

<td>
    <a href="#" data-th-href="@{/edit(personId=${person.personId})}">Edit</a>
    <!--a href="#" data-th-href="@{/delete(personId=${person.personId})}">Delete</a></td-->
    <form method="get" th:action="@{/edit(personId=${person.personId})}">
        <button type="submit" name="submit" value="value">Edit</button>
    </form>
</td>

テスト用のリンクとフォームがあるところ。

呼び出されるコントローラーメソッドは次のとおりです。

// Gets a Person.
@RequestMapping(value="/edit", method=RequestMethod.GET)
public String getEditPerson(@RequestParam("personId") String personId, Model model) {
    logger.info(PersonController.class.getName() + ".getEditPerson() method called."); 

    Person person = personDAO.get(Integer.parseInt(personId));
    model.addAttribute("person", person);

    // Set view.      
    return "/edit";
}

GETのボタンバージョンが呼び出されたときのエラーは次のとおりです。

Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.

Sun Jul 24 00:26:16 BST 2016
There was an unexpected error (type=Bad Request, status=400).
Required String parameter 'personId' is not present`

ここではpersonId以外のデータがサーバーに送信されないため、GETを使用して編集をトリガーしています。データベースアクションは実行されないため、GETである必要があります。

htmlhttp-postthymeleafhttp-get
7
Mr Morgan

リンクを使用していますが、それは不可能だと思います。使用するメソッドPOSTを指定できるフォームを使用する必要があります。

以下の例では、<button>要素の代わりに<a>を使用していますが、機能します。必要なのは、CSSを使用してボタンをリンクのようにスタイル設定することだけです。

<form method="POST" th:action="@{/edit(personId=${person.personId})}">
    <button type="submit" name="submit" value="value" class="link-button">This is a link that sends a POST request</button>
</form>

これで、コードは次のようになります。

<tr th:each="person : ${persons}">                
    <td th:text="${person.personId}"></td>
    <td th:text="${person.name}"></td>
    <td th:text="${person.address}"></td>
    <td th:text="${person.telephone}"></td>
    <td th:text="${person.email}"></td>
    <td>
        <form method="POST" th:action="@{/edit(personId=${person.personId})}">
            <button type="submit" name="submit" value="value" class="link-button">EDIT</button>
        </form> | 
        <form method="POST" th:action="@{/delete(personId=${person.personId})}">
            <button type="submit" name="submit" value="value" class="link-button">DELETE</button>
        </form>
    </td>
</tr>

編集

Javaコードを共有したので、コントローラーでは、personIdをPathVariableとしてではなく、RequestParamとして期待しています。その場合、フォームにはその値が必要です...

フォームを編集し、次のように個人IDを追加します。

<form method="POST" th:action="@{/edit}">
    <input type="hidden" name="personid" id="personId" th:value="${person.personId}" />
    <button type="submit" name="submit" value="value" class="link-button">This is a link that sends a POST request</button>
</form>

また、フォームのアクションを/ editに変更したことにも注意してください。これは、コントローラーがどのように見えるかを示しています。

12
Rayweb_on

Thymeleafがテーブルの行ごとにPOSTリクエストを許可するかどうかを誰かが知っていますか？または行ごとに単純なHTMLフォームを作成する必要がありますか？

HTMLはPOSTリンク付きのリクエストをサポートしておらず、フォームを使用する必要があります（Rayweb_onが説明したように）。しかし、Thymeleafではカスタムタグを定義できます。

<a th:href="@{/edit(personId=${person.personId})}" custom:linkMethod="post">Edit</a>

...次のHTMLを生成します（jQueryが利用可能であると仮定）：

<a href="#" onclick="$('<form action=&quot;/edit/personId=123456&quot; method=&quot;post&quot;></form>').appendTo('body').submit(); return false;">Edit</a>

カスタムタグ定義（シンプルにするためのエラーチェックなし）：

/**
 * Custom attribute processor that allows to specify which method (get or post) is used on a standard link.
 */
public class LinkMethodAttrProcessor extends AbstractAttributeTagProcessor {

    private static final String ATTR_NAME = "linkMethod";
    private static final int PRECEDENCE = 10000;

    public LinkMethodAttrProcessor(final String dialectPrefix) {
        super(
                TemplateMode.HTML, // This processor will apply only to HTML mode
                dialectPrefix,     // Prefix to be applied to name for matching
                null,              // No tag name: match any tag name
                false,             // No prefix to be applied to tag name
                ATTR_NAME,         // Name of the attribute that will be matched
                true,              // Apply dialect prefix to attribute name
                PRECEDENCE,        // Precedence (inside dialect's own precedence)
                true);             // Remove the matched attribute afterwards
    }

    @Override
    protected void doProcess(final ITemplateContext context, final IProcessableElementTag tag,
                             final AttributeName attributeName, final String attributeValue,
                             final IElementTagStructureHandler structureHandler) {

        // get the method name (tag parameter)
        final IEngineConfiguration configuration = context.getConfiguration();
        final IStandardExpressionParser parser = StandardExpressions.getExpressionParser(configuration);
        final IStandardExpression expression = parser.parseExpression(context, attributeValue);
        final String method = (String) expression.execute(context);

        // add custom javascript to change link method
        final String link = tag.getAttribute("href").getValue();
        final String action = "$('<form action=&quot;" + link + "&quot; method=&quot;" + method + "&quot;></form>').appendTo('body').submit(); return false;";
        structureHandler.setAttribute("onclick", action);
        structureHandler.setAttribute("href", "#");
    }
}

このカスタム属性を登録する方法については、 Thymeleadのドキュメント を参照してください。

1
Siggen