Home / Questions / 217082
Accepted
Nacho Zve De La Torre
Asked: 2020-11-27 08:02:16 +0800 CST 2020-11-27 08:02:16 +0800 CST

如何从 JavaScript 将输入数组发送到 Spring 控制器？

  • 772

我在做我需要的事情时遇到了很多麻烦。

我将解释代码和问题：

在此处输入图像描述

用户必须通过单击图像中的复选框来选择他们想要的冰淇淋口味，然后使用“提交订单”按钮提交订单。

<!-- Modal -->
<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <form id="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:value="${gusto.id}"/></td>
                    </tr>
            </table>
            <p id="errorGustos"></p>
            <button type="submit" class="btn-submit">Enviar Pedido</button>
        </form>
    </div>
</div>

我的 JavaScript 代码验证点击了哪些喜欢并将它们保存在一个数组中。然后它应该将该数组发布到 Java 驱动程序。

/* Validar checkboxes clickeados */
var checkboxes = document.querySelectorAll('.single-checkbox');
var clickeados = [];

checkboxes.forEach(elem => {
    elem.addEventListener('change', (event) => {
        event.stopPropagation();
        if(elem.checked) {
           if(!clickeados.includes(elem)){
                   clickeados.push(elem);
                   console.log(clickeados);
           }
        }
        else{
            if(clickeados.includes(elem)){
                   clickeados.pop(elem);
                   console.log(clickeados);
            }
        }
    });
});

/* Validar cuantos gustos fueron seleccionados antes de hacer el submit */
$('#vasitoForm').on('submit', (event) => {
    if(clickeados.length == 0){
        event.preventDefault();
        document.getElementById("errorGustos").innerHTML = "Debe seleccionar por lo menos un gusto";
    }
    else if(clickeados.length > 0 && clickeados.length < 3){
        $('#vasitoForm').attr('action', clickeados + '/pedido');
    }
});

消息已完成，但 Spring 控制器将数组接收为“[object HTMLInputElement]”，而不是作为我验证的数组......

在这里我被卡住了，我不知道如何验证来自控制器的数组数据（被单击的复选框），以便稍后我可以在新页面中向用户显示选定的喜欢。

有任何想法吗 ？

这是控制器代码，但我认为它不正确，因为它对我不起作用：

    @RequestMapping(value="{gustos}/pedido", method = RequestMethod.POST)
    public void pedido(HttpServletRequest request) {

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

        for (Map.Entry<String, String[]> entry : dataFeed.entrySet()) {
            for (String str : request.getParameterValues(entry.getKey())) {
                int gustoId = Integer.parseInt(entry.getKey());
                Gusto gusto = gustoService.findGustoById(gustoId);
                System.out.println(gusto.toString());
//                if (str.equals("some-value")) { // where some-value is value="some-value" on your checkbox
//                    // do something with the gusto
//
            }
        }
    }
javascript

1 Answers

  1. Best Answer

    当表单中有多个同名字段时，发送请求时（提交时）会将它们分组到一个数组中。在复选框的情况下，发送所有被标记的值（值）：

    const form=document.getElementById('form');

form.addEventListener('submit',(event) =>{
   const fd= new FormData(form);
   
  console.log(fd.getAll('box'));
  event.preventDefault();
});

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="checkbox" name="box" value="prueba1"/><label>Prueba1</label>
<input type="checkbox" name="box" value="prueba2"/><label>Prueba2</label>
<input type="checkbox" name="box" value="prueba3"/><label>Prueba3</label>
<input type="checkbox" name="box" value="prueba4"/><label>Prueba4</label>
<input type="checkbox" name="box" value="prueba5"/><label>Prueba5</label>
<button>test</button>
</form>

    我做了一个 prevent default 来阻止提交，我们只是想模拟它，但是你可以看到在控制台中你可以看到要发送的内容

    • 1