javascript - 如何使用 Spring MVC 和 ThymeLeaf 正确验证复选框？

Question

我创建了这个需要一些验证的小动物:

这是 home.html 文件:

<!-- Modal -->
    <div id="vasoModal" class="modal">
        <div class="modal-content">
            <h4 class="modal-title">Vasito</h4>
            <h6>Seleccione hasta dos gustos</h6>
            <form th:action="@{/pedido}" name="vasitoForm" method="post">
                <table class="tabla">
                        <tr th:each="gusto : ${gustos}">
                            <td class="flavour" th:text="${gusto.nombre}"></td>
                            <td><input class="single-checkbox" type="checkbox" th:field="${gusto.id}"/></td>
                        </tr>
                </table>
                <button type="submit" class="btn-submit">Enviar Pedido</button>
            </form>
        </div>
    </div>

所以我现在需要验证哪些已被单击并将其发送到 Controller 进行验证:

var checkboxes = document.querySelectorAll('.single-checkbox');
var clicked = [];

checkboxes.forEach(elem => {
    elem.addEventListener('click', (event) => {
        event.stopPropagation();
        alert(elem.value);
        // My logic here was to add the clicked checkboxes to the clicked array and then send that to the controller to validate !!

这样可以吗？ }); });

嗯...我这里有两个问题...第一个问题是 HTML 中的这一行不起作用:

th:field="${gusto.id}"

我无法将每个“gusto”(西类牙语 flavor )的 id 绑定(bind)到复选框(这似乎是一个不错的解决方案)。

我收到的错误如下:

Neither BindingResult nor plain target object for bean name 'gusto' available as request attribute

嗯......我已经用谷歌搜索并找到了解决方案，但不是为了我的案例，我将“gustos”ArrayList发送到 Controller 中的 View 。

@RequestMapping(value = "/")
public String getAllProductos(ModelMap modelMap){
    List<Producto> productos = productoService.findAll();
    List<Gusto> gustos = gustoService.findAll();
    modelMap.put("gustos", gustos);
    modelMap.put("productos", productos);
    return "home";
}

所以这个问题有点奇怪!

嗯...第二个问题，或者说问题，是解决这个问题后我想要做什么...它在 JS 文件中被注释了:

// My logic here was to add the clicked checkboxes to the clicked array and then send that to the controller to validate !!

这个方法可以吗？有人可以帮我找到一个更好的解决方案来解决复选框错误吗？

...

Answer 1

对于您的第一期，th:field=需要 *而不是$ 。尝试改变th:field="${gusto.id}"至th:field="*{gusto.id}" - 文档here .

对于你的第二个，我不确定这是否是最优雅的方式，但它一直对我有用。首先，添加一个HttpServletRequest request (文档 here )作为 POST 方法中的请求参数。从那request ，你可以拉出一个Map<String, String[]> ，您可以从中提取数据。然后，您可以使用该数据执行您想要的操作:

Map<String, String[]> dataFeed = request.getParameterMap(); // this pulls in the data from the checkboxes

for (Map.Entry<String, String[]> entry : dataFeed.entrySet()) { // this iterates through each entry from the data above
        for (String str : request.getParameterValues(entry.getKey())) { // this loops through the key for each entry 
            Long yourVar = Long.parseLong(entry.getKey()); // assigning the long version of that str to yourVar
            if (str.equals("Yes")) {
                Do something with yourVar // do something with it
            }
            daoObject.save(whatever you've done above);
        }
    }

在你的情况下，也许这样的事情会起作用:

@RequestMapping(value="saveGusto", method = RequestMethod.POST)
public String saveGusto(HttpServletRequest request) {

    Map<String, String[]> dataFeed = request.getParameterMap();

    for (Map.Entry<String, String[]> entry : dataFeed.entrySet()) {
        for (String str : request.getParameterValues(entry.getKey())) {
            Long gustoId = Long.parseLong(entry.getKey());
            Gusto gusto = gustoDao.findOne(gId);

            if (str.equals("some-value")) { // where some-value is value="some-value" on your checkbox
                // do something with the gusto
            }
            gustoDao.save(gusto);
        }
    }
}

希望它能为您提供另一条探索途径!